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 Block-Elementen 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.

Referenz-Box

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.

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

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.

Siehe auch

• alternatives Box-Modell mit box-sizing
• CSS/Tutorials/Einstieg/Box-Modell
• zusammenfallende Außenabstände im Artikel Außenabstand
• Box-Model-Bug und Quirks Mode

Weblinks

• Codepen/carolineartz interaktive Demo der verschiedenen Möglichkeiten