CSS/Box-Modell

Das „Box-Modell“ beschreibt die rechteckigen Blöcke oder Boxen, die im Elementbaum erzeugt und auf dem Bildschirm dargestellt werden. Es ist somit Grundlage jeden Layouts.

← Kaskade

Einstieg in CSS (Übersicht)

Vererbung →

„klassisches“ Boxmodell

Die vom Browser erzeugte Box wird durch Höhe und Breite, aber auch durch Innen- und Außenabstände sowie Rahmen, festgelegt.

• 
• 
• 

Bei Blockelementen können Höhe und Breite beliebig festgelegt werden, bei Inlineelementen werden die Maße durch den Inhalt vorgegeben. Abstände und Rahmen können für jede der vier Seiten einer Box einzeln festgelegt werden.

Eine Box kann bestehen aus:

• Dem Inhaltsbereich, also der Fläche, die durch Texte und Bilder oder Eigenschaften wie width und height vorgegeben wird,
• einem Innenabstand (padding),
• einem Rahmen (border) und
• einem Außenabstand (margin).

Wird eine Box positioniert, beginnt die linke Außenkante bei left, die obere Außenkante bei top, die rechte Außenkante bei right und die untere Außenkante bei bottom.

Hintergrundbilder und -farben werden, falls mithilfe von background-clip nichts Gegenteiliges festgelegt wurde, in den Bereichen des Inhalts, des Innenabstands und des Rahmens gezeichnet. Ein Rahmen verdeckt jedoch den Hintergrund, so dass dieser nur dann sichtbar ist, wenn der Rahmen teilweise durchsichtig ist (z.B. beim gestrichelten Rahmenstil). Die Außenabstände sind immer vollständig transparent.

Beachten Sie: Der Begriff „Box“ ist nicht mit dem Begriff „Element“ gleichzusetzen. Nicht jedes Element erzeugt eine Box, aber Boxen können auch erzeugt werden, wenn in einem Dokument kein Element als direktes Gegenstück existiert.

Referenz-Box

Als Referenz-Box wird derjenige Teil einer Box bezeichnet, für den bestimmte Eigenschaften gelten sollen.

Die einzelnen Rechtecke werden von innen nach außen bezeichnet als

• content-box: (Inhaltsbox) Bereich, der durch den Inhalt oder die Eigenschaften width und height festgelegt wurde.
• padding-box: (Polsterungsbox) Bereich, der content-box und padding (Innenabstand) umfasst. Besitzt eine Seite keinen Innenabstand, so ist die Polsterungskante mit der Innenkante identisch.
• border-box: (Rahmenbox) Box, die content-box, einen möglichen Innenabstand und die durch border festgelegten Rahmen umfasst. Besitzt eine Box keinen Rahmen, so ist die Rahmenbox mit der Polsterungsbox identisch.
• margin-box: Box mitsamt durch margin festgelegten Außenabständen. Sind für eine Box keine Außenabstände definiert, so ist die Außenkante mit der Rahmenkante identisch.

Eigenschaften, die sich auf eine solche Referenz-Box beziehen, sind beispielsweise box-sizing, background-clip oder background-origin. Nicht immer sind alle möglichen Werte auch erlaubt.

Gesamthöhe und Gesamtbreite

Für Anfänger irritierend ist, dass mehrere Boxen nicht nebeneinander dargestellt werden, obwohl deren Gesamtbreite genau der Breite des Eltern-Elements entspricht. Dies liegt daran, dass alle Bestandteile einer Box addiert werden.

Die Gesamtbreite errechnet sich aus:

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

Die Gesamthöhe einer Box wird ebenso errechnet aus:

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

Box-Modell-Fehler im Internet Explorer

Der Internet Explorer besaß in den Versionen 5 und 5.5 einen als Box-Model-Bug bekannten Fehler. Durch diesen Fehler wurden die Maße einer Box falsch berechnet: Die Maße für Rahmen und Innenabstände werden nicht zu Breite und Höhe addiert, sondern davon abgezogen. Dieser Fehler wurde in Version 6 behoben, jedoch im Quirks-Modus beibehalten. Das bedeutet, dass der Box-Modell-Fehler auch in aktuellen Internet Explorer Versionen auftritt, wenn nicht der standardkonforme Modus verwendet wird.

Dieses Vorgehen scheint intuitiver als das W3C-Modell, weshalb als Ergänzung zum „klassischen“ Box-Modell mit der Eigenschaft box-sizing ausgesucht werden kann, welche Referenz-Box zur Berechnung herangezogen wird.

Empfehlung: Verwenden Sie

• box-sizing, um Breiten und Höhenberechnungen einfacher zu halten.
• relative Werte in em oder rem, die sich an die Schriftgröße anpassen.

Insgesamt ist es heute angesichts der weit verbreiteten mobilen Geräte wichtiger, Inhalte mit media queries flexibel anzuordnen, anstatt pixelgenaue Layouts für eine Viewportbreite zu erstellen.

Verwenden Sie flexible Layouts mit

• flexbox
• Grid Layout

Zusammenfallende Außenabstände (collapsing margins)

Zwei oder mehr benachbarte Außenabstände (margins) können sich miteinander verbinden und so einen einzigen Abstand bilden. Dieser Vorgang wird zusammenfallen genannt und der so entstandene Abstand wird zusammengefallener Außenabstand (englisch: collapsed margin) genannt.

Horizontale Außenabstände fallen nicht zusammen.

Vertikale Außenabstände können zusammenfallen, wenn sie zu einer Block-Box gehören und weder durch Innenabstände (padding), Rahmen (border), Inlineelemente (mit einer Höhe größer als Null) oder Clearance voneinander getrennt sind. Die Beziehung der Boxen zueinander spielt keine Rolle, folgende Paare können daher zusammenfallen:

• Oberer Außenabstand einer Box und oberer Außenabstand der ersten Kind-Box.
• Unterer Außenabstand einer Box und oberer Außenabstand der nachfolgenden Box.
• Unterer Außenabstand einer Box und unterer Außenabstand der letzten Kind-Box.
• Oberer und unterer Außenabstand einer Box, wenn diese keine Höhe, bzw. keinen Inhalt, hat.

Fallen positive Außenabstände zusammen, besteht der entstehende Außenabstand aus dem Maximum der zusammengefallenen Außenabstände.

Hinweis

Das erste in der Liste genannte Paar führt manchmal zu Verwirrung. Aus Sicht von Autoren wird oft gewünscht, dass der festgelegte Außenabstand einer Kind-Box von der Eltern-Box umschlossen wird. Dieses gestalterische Ziel kann durch das Festlegen eines oberen Innenabstands oder eines oberen Rahmens für die Eltern-Box erreicht werden.

Beispiel

#geschwister-box { background-color: darkgrey; }
#eltern-box { margin-top: 1em; background-color: silvergrey; }
#kind-box { margin-top: 2em; }

<div id="geschwister-box">Geschwister-Box.</div>
<div id="eltern-box">
 <div id="kind-box">Kind-Box.</div>
</div>

In diesem Beispiel fallen die oberen Außenabstände der Eltern-Box (hier 1em) und der Kind-Box (hier 2em) zusammen. Zwischen der Geschwister-Box und der Eltern-Box entsteht so ein Abstand von 2em. Der Inhalt der Kind-Box scheint dadurch an der oberen Kante der Eltern-Box zu kleben. Durch die Definition eines oberen Innenabstands oder eines oberen Rahmens für die Eltern-Box können die Außenabstände von Eltern- und Kind-Box bewahrt werden: Zwischen Geschwister- und Eltern-Box entsteht ein Abstand in Höhe von 1em und der Abstand der Kind-Box zur Oberkante der Elternbox beträgt 2em.

Fallen positive und negative Abstände zusammen, so wird das Maximum der absoluten Werte der negativen Außenabstände vom Maximum der absoluten Werte der positiven Außenabstände abgezogen.

Beispiel

#kind-box-1 { margin-bottom: -1em; }
#eltern-box-1 { margin-bottom: 2em; }
#eltern-box-2 { margin-top: -3em; }
#kind-box-2 { margin-top: 4em; }

<div id="eltern-box-1">
 <div id="kind-box-1">Kind-Box 1.</div>
</div>
<div id="eltern-box-2">
 <div id="kind-box-2">Kind-Box 2.</div>
</div>

Dieses Beispiel zeigt vier benachbarte Außenabstände. Zunächst wird das Maximum der positiven Außenabstände ermittelt (mathematisch max(2em, 4em) = 4em), anschließend das absolute Maximum der negativen Außenabstände (mathematisch max(|-1em|, |-3em|) = 3em). Das negative Maximum wird vom positiven Maximum abgezogen (4em minus 3em = 1em), d.h. zwischen beiden Eltern-Boxen entsteht ein Abstand von 1em.

Allgemeine Ausnahmen

Nicht alle vertikalen Außenabstände fallen zusammen, folgende Ausnahmen gibt es:

• Die Außenabstände, die für das Wurzelelement (in HTML das html-Element) festgelegt wurden, fallen nicht mit anderen Außenabständen zusammen.
• Außenabstände von Boxen, die einen neuen Blockformatierungskontext erzeugen (z.B. Tabellenüberschriften oder Boxen mit einem anderen Wert für overflow als visible) fallen nicht mit den Außenabständen von Kind-Boxen zusammen.
• Die Außenabstände von floats, inline-Blöcken und absolut positionierten Boxen fallen nicht mit den Außenabständen anderer Boxen zusammen (also weder mit Abständen benachbarter Boxen noch mit Abständen von Kind-Boxen).
• Der untere Außenabstand einer Box fällt nicht mit dem unteren Außenabstand der letzten Kind-Box zusammen, wenn die Höhe der Elternbox mit height festgelegt wurde.

Beachten Sie: Zwar ist es nicht unmittelbar ersichtlich, jedoch folgt daraus, dass der untere Außenabstand einer Box mit dem unteren Außenabstand der letzten Kind-Box zusammenfallen darf, selbst wenn der Eltern-Box eine Mindest- min-height oder Maximalhöhe max-height zugewiesen wurde.

Ausnahme Clearance

Erzeugt ein Element Clearance (d.h. das Element wird Aufgrund seiner clear-Eigenschaft unter ein floatendes Element geschoben), so wird verhindert, dass der obere Außenabstand des clearenden Elements mit einem anderen Außenabstand zusammenfällt. Dies kann dazu führen, dass das clearende Element vertikal höher positioniert wird, als es wäre, wenn es die clear-Eigenschaft nicht besäße.

Fallen die Außenabstände eines clearenden Elements ggfs. auch mit den Außenabständen nachfolgender Elemente zusammen, so fällt der dabei entstehende Außenabstand nicht mit dem unteren Außenabstand des Elternelements zusammen.

Hauptartikel: CSS/Tutorials/Ausrichtung

Anwendung zusammenfallender Außenabstände

Das Prinzip der zusammenfallenden Außenabstände ist relativ komplex und kann bei der Gestaltung von Layouts zum Stolperstein werden. Dennoch handelt es sich um ein wichtiges Verhalten, das oftmals die intuitive Erwartungshaltung von Autoren erfüllt.

Beispiel

@media print {
 h3 { margin: 20pt 0; }
 p { margin: 12pt 0;}
}

<h3>Überschrift</h3>
<p>Absatz Eins.</p>
<p>Absatz Zwei.</p>

In diesem Beispiel besitzt das Überschriftenelement einen größeren vertikalen Außenabstand als die Absatzelemente. Ziel der Definition ist es, die Überschrift von den Absätzen etwas abzuheben. Der gewünschte Abstand zwischen Überschrift und Absatz beträgt dabei 20 Punkte. Diese Darstellung wird jedoch nur erreicht, wenn die Außenabstände zusammenfallen. Der Vorteil liegt darin, dass bei der Gestaltung der Überschrift die Gestaltung der Absätze nicht berücksichtigt werden muss. Auch die Abstände der Absätze zueinander entsprechen mit 12 Punkten eher dem Autorenwunsch als ein kumulierter Abstand von 24 Punkten.

Hinweis

Das Konzept der zusammenfallenden Außenabstände ist nicht nur in CSS bekannt. Ein ähnliches Verhalten können Sie auch in verschiedenen Textverarbeitungsprogrammen beobachten.

Hauptartikel: CSS/Eigenschaften/Abstand/margin#zusammenfallende_Außenabstände

alternatives Boxmodell

• 

Mit CSS3 wurde das starre Konzept des Boxmodells angepasst. Mithilfe der Eigenschaft box-sizing lässt sich spezifizieren, worauf sich die Angaben von width bzw. height beziehen sollen.

Hinweis

Durch die Verwendung von box-sizing: border-box lassen sich viele Schwierigkeiten beim Layouten umgehen. Dies gilt vor allem dann, wenn prozentuale Angaben für Abmessungen mit anderen Längenangaben kombiniert werden sollen.

← Kaskade

Einstieg in CSS (Übersicht)

Vererbung →

Weblinks

• W3C: The box model
• Codepen/carolineartz interaktive Demo der verschiedenen Möglichkeiten