Boxmodell

von 3 Mitwirkenden:

Ü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:

Thanks to Hannes Kraft.

 

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

Siehe auch

Schlagwörter des Dokuments und Mitwirkende

Schlagwörter: 
Mitwirkende an dieser Seite: fscholz, SJW, Michael2402
Zuletzt aktualisiert von: fscholz,