CSS Box-Model im Detail

Zusammenfassung

CSS Box-Model: Alles in  hat einen Rahmen, und das Verständnis dieser Rahmen ist der Schlüssel zum Erstellen von Layouts mit  oder zum Ausrichten von Elementen an anderen Elementen. In diesem Artikel stellt unser Senior Software Engineer Christian Otto die Details des CSS Box-Model vor.

Im Wesentlichen unterscheidet man in  zwischen zwei Arten von Boxen, die sich in Bezug auf den Seitenfluss und in Bezug auf andere Boxen unterschiedlich verhalten:

  • Block-Boxen und
  • Inline-Boxen

Block-Boxen

Hat eine Box oder ein HTML-Element den (äußeren) display-Wert „block“ (entweder per default oder explizit gesetzt), verhält sie sich wie folgt:

  • bricht in eine neue Zeile um
  • erstreckt sich in der Inline-Richtung (horizontal) auf die Größe des direkten Containers, also 100% Breite
  • „width“ und „height“ werden als Werte respektiert
  • Änderungen an „padding“, „margin“ und „border“ bewirken, dass andere Elemente von der Box weggerückt werden

Inline-Boxen

Hat eine Box hingegen einen (äußeren) display-Wert „inline“, so gelten folgende Besonderheiten:

  • die Box bricht nicht in eine neue Zeile um
  • „width“ und „height“ werden als Werte nicht respektiert
  • vertikales Padding, Margins und Border werden angewendet, bewirken jedoch nicht, dass sich andere Inline-Boxen von der Box entfernen
  • horizontales Padding, Margins und Border werden angewendet und bewirken, dass andere Inline-Boxen sich von der Box entfernen

Äußerer und innerer Display-Typ

Boxen in  haben neben dem äußeren Display-Typ auch noch einen inneren Display-Typ, welcher vorgibt, wie das Layout von Elementen innerhalb dieser Box aussieht.
Standardmäßig werden Elemente innerhalb einer Box im normalen Layout-Fluss angeordnet, also abhängig davon, ob es sich um Block- oder Inline-Elemente handelt.

Man kann allerdings Einfluss auf den inneren Display-Typen nehmen, indem man z.B. auf „display“ auf „flex“ stellt. Dann ändert sich der äußere Display-Typ auf „block“, aber
der innere Display-Typ ist dann „flex“. Somit würde in diesem Fall jedes direkte Kind-Element der Box ein „flex item“ werden und sich nach den Regeln der Flexbox Spezifikation verhalten.

Das Box-Modell

Das CSS-Box-Modell als Ganzes gilt für Block-Boxen, Inline-Boxen verwenden hingegen nur einen Teil des Verhaltens, das im Box-Modell definiert ist.
Das Modell definiert, wie die verschiedenen Teile einer Box – Rand, Rahmen, Polsterung und Inhalt – zusammenarbeiten, um eine Box zu erstellen, die auf einer Seite zu sehen ist.
Um zusätzliche Komplexität hinzuzufügen, gibt es ein Standard- und ein alternatives Box-Modell.

Teile einer Box

Eine Block-Box besteht aus folgenden Bereichen

  • Content box (Inhalt): Der Bereich, in dem ihr Inhalt angezeigt wird, dessen Größe mithilfe von Eigenschaften wie width und height angepasst werden kann.
  • Padding box (Auffüllung): Die Auffüllung sitzt als weißer Raum um den Inhalt herum; seine Größe kann über padding und verwandte Eigenschaften gesteuert werden.
  • Border box (Rahmen): Die Border box (Rahmen) umschließt den Inhalt und alle Auffüllungen. Größe und Stil können über border und verwandte Eigenschaften gesteuert werden.
  • Margin box (Außenabstand/Rand): Der Rand ist die äußerste Ebene, die den Inhalt, die Auffüllung und den Rahmen als Whitespace zwischen dieser Box und anderen Elementen umschließt. Die Größe kann über margin und verwandte Eigenschaften gesteuert werden.

Zur Veranschaulichung:


Das Standard-Box-Modell

Wenn man im Standard-Box-Modell einer Box ein width und ein height Attribut zuweist, definiert dies die Breite und Höhe der Inhaltsbox.
Zu dieser Breite und Höhe werden dann alle Auffüllungen und Ränder hinzugefügt, um die Gesamtgröße zu erhalten, die von der Box eingenommen wird.
(Siehe nächste Grafik)

Eine Box mit folgenden Eigenschaften

.box {
width350px;  
height150px;
margin10px;
padding25px;
border5px solid black;
}
beansprucht einen tatsächlichen Platz von 410px in der Breite (350 + (2 * 25) + (2 * 5)) und 210px in der Höhe (150 + (2 * 25) + (2 * 5)):

Das alternative-Box-Modell

Einige Zeit nach dem Standard-Box-Modell wurde ein alternatives Box-Modell eingeführt, was davon absieht padding- und border-Werte zu der Breite und Höhe hinzu zu addieren.
Will man dieses alternative Box-Modell aktivieren, so geschieht dies auf folgende Art:

.box {
box-sizing: border-box;
...
}

Dies sorgt dafür, dass die im obigen Beispiel gezeigte Box nun eine Gesamtgröße von 350px * 150px hat, der eigentliche Inhaltsbereich also kleiner wird.

Best practice / Snippet

Will man das alternative Box-Modell als Standard auf seiner HTML-Seite (oder Single Page Application, etc.) einfügen, empfiehlt es sich, das box-sizing am html Selektor einzufügen, und alle anderen Elemente diesen Wert erben zu lassen.

html {
box-sizing: border-box; /* set alternative box model per default */
}
*, *::before, *::after {
box-sizing: inherit;    /* let any element inherit the current box model value */
}
 
 
Für Fragen steht gerne unser Senior Software Engineer Christian Otto zur Verfügung!

Zu den Übersichtsseiten