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) CSS-Standard, wenig intuitiv.
width
gibt nicht die Gesamtbreite an, die das Element einnimmt, sondern die Breite von seinem Inhalt – ohnepadding-left/right
undborder-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.
Siehe auch[Bearbeiten]
- alternatives Box-Modell mit box-sizing
- zusammenfallende Außenabstände im Artikel Außenabstand
- Box-Model-Bug und Quirks Mode
Weblinks[Bearbeiten]
- Codepen/carolineartz interaktive Demo der verschiedenen Möglichkeiten