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) CSS-Standard, wenig intuitiv.
  width gibt nicht die Gesamtbreite an, die das Element einnimmt, sondern die Breite von seinem Inhalt – ohne padding-left/right und border-left/right-width.
• border-box: (Rahmenbox) vom IE ursprünglich entgegen dem Standard implementiert, dann Quirks-Modus.
  Intuitiver als das Standard-Modell, denn width ist die tatsächlich vom Element beanspruchte Breite inklusive padding-left/right und border-left/right-width.
• padding-box: (Polsterungsbox) Bereich, der content-box und padding (Innenabstand) umfasst. Besitzt eine Seite keinen Innenabstand, so ist die Polsterungskante mit der Innenkante 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

Hauptartikel: CSS/Tutorials/Einstieg/Box-Modell

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

Weblinks

• Codepen/carolineartz interaktive Demo der verschiedenen Möglichkeiten