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[Bearbeiten]
Die einzelnen Rechtecke werden von innen nach außen bezeichnet als
-
content-box
: (Inhaltsbox) Bereich, der durch den Inhalt oder die Eigenschaftenwidth
undheight
festgelegt wurde. -
padding-box
: (Polsterungsbox) Bereich, dercontent-box
und padding (Innenabstand) umfasst. Besitzt eine Seite keinen Innenabstand, so ist die Polsterungskante mit der Innenkante identisch. -
border-box
: (Rahmenbox) Box, diecontent-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.
Siehe auch[Bearbeiten]
- 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[Bearbeiten]
- Codepen/carolineartz interaktive Demo der verschiedenen Möglichkeiten