Boxmodell

Übersicht

Eine Box hat in CSS vier Bereiche: margin edge (weiß außen), border edge (grau), padding edge (grün), und content edge (weiß mitte). Das Folgende Diagramm zeigt die unterschiedlichen Höhen und Breiten anhand der Eigenschaften, die Veränderungen an einer CSS Box zulassen:

Details

• Die komplette Breite eines Elements berechnet sich wie folgt:

  margin-left + border-left-width + padding-left + width + padding-right + border-right-width + margin-right

• Die komplette Höhe eines Elements berechnet sich wie folgt:

  margin-top + border-top-width + padding-top + height + padding-bottom + border-bottom-width + margin-bottom

• Der MS Internet Explorer verwendet die width- und die height-Eigenschaft als Innenabstand des Rahmens, nicht des padding-Bereiches.

  width = padding-left + width + padding-right

  height = padding-top + height + padding-bottom

Spezifikation

• CSS 2.1 #Box model

Siehe auch

• width, height
• padding, border, margin
• position, left, top, right, bottom