CSS/Box-Modell

Im visuellen Anzeigemodell erfolgt die Darstellung von Elementen durch das Zeichnen von Rechtecken. Die Bestandteile dieser Rechtecke beschreibt das „Box-Modell“. 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).

Bei Blockelementen können Höhe und Breite beliebig festgelegt werden, bei Inlineelementen werden die Maße durch den Inhalt vorgegeben.

Innen- und Außenabstände sowie Rahmen können für jede der vier Seiten einer Box einzeln festgelegt werden.

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.

klassisches Boxmodell

• 
• 
• 

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

• content-box
• padding-box
• border-box
• margin-box

Diese Bezeichnungen finden sich als Werte in einigen Eigenschaften wieder, etwa box-sizing oder background-origin.

Gesamthöhe und Gesamtbreite

Alle Bestandteile einer Box werden addiert, siehe Grafik oben. 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

Achtung!

In Version 5 und 5.5 besitzt der Internet Explorer einen als Box-Model-Bug bekannten Fehler. Durch diesen Fehler werden 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.

Kantenbezeichnungen

Da eine Box aus mehreren Komponenten bestehen kann, werden für die einzelnen Bereiche verschiedene Kantenbezeichnungen definiert.

Als Innen- oder Inhaltskante werden die Strecken bezeichnet, die den Inhaltsbereich einer Box umfassen. Das ist der Bereich, der durch den Inhalt oder die Eigenschaften width und height festgelegt wurde. Der Bereich einer Box, der von den Innenkanten umgeben ist, wird auch content box (Inhaltsbox) genannt.

Die Kanten, die eine Box mitsamt Innenabstand umfassen, werden Polsterungskanten genannt. Der von diesen Kanten umfasste Bereich wird padding box (Polsterungsbox) genannt. Besitzt eine Seite keinen Innenabstand, so ist die Polsterungskante mit der Innenkante identisch.

Die Rahmenkanten umgeben eine Box mit deren Rahmen. Der durch diese Kanten abgesteckte Bereich wird border box (Rahmenbox) genannt. Besitzt eine Box keinen Rahmen, so ist die Rahmenkante mit der Polsterungskante identisch.

Eine vollständige Box wird durch die Außenkanten definiert. Die Außenkante umfasst eine Box mitsamt Außenabständen, also die margin box. Sind für eine Box keine Außenabstände definiert, so ist die Außenkante mit der Rahmenkante identisch.

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/Anwendung und Praxis/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.

siehe auch

zusammenfallende Außenabstände im Artikel Außenabstand

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.

Weblinks

• Codepen/carolineartz interaktive Demo der verschiedenen Möglichkeiten

← Stylesheets in Dokumente einbinden

Einstieg in CSS (Übersicht)

Medienabfragen (Media Queries) →