Das Boxmodel
Nach obenEinleitung
Mit CSS kann man HTML Elemente formatieren. Doch um mit CSS zu arbeiten, muss man das Boxmodel beherrschen.
Jedes Element auf einer Seite ist eine rechteckige Box. Es wird zwischen zwei Typen differenziert: den Inline- und den Block-Elementen. Der Unterschied liegt darin, dass Inline-Elemente keine Höhe, keine Breite und keinen Aussenabstand haben können. Block-Elemente stehen - sofern nicht mit CSS modifiziert - alleine in einer Zeile auch wenn sie nur sehr schmal sein können. Inline-Elemente hingegen werden in der gleichen Zeile dargestellt.
Elemente bestehen also aus folgenden Eigenschaften:
- Inhalt (Text, Bilder, weitere Elemente)
- Innen- und Aussenabstand (Aussenabstand nur bei Block-Elementen)
- Rand
- Hintergrund (Farbe und/oder Bild)
Aufbau
Die folgende Grafik zeigt wie das Boxmodel hierarchisch aufgebaut ist.
margin und padding sind immer transparent. border, margin und padding können für alle vier Seiten (top, right, bottom, left) andere Werte haben.
Beispiel
Ein einfaches Beispiel für ein span- und ein p-Element mit folgenden Angaben:
- Aussenabstand von 20px (nur bei dem
p-Element) - Innenabstand von 5px
- 1px dicker roter Rahmen
- blaue Hintergrundfarbe
- weisser Text
p, span {
margin: 20px;
padding: 5px;
border: 1px solid red;
background: blue;
color: white;
}
Boxmodel Beispiel bei einem Inline-Element
und bei einem Block-Element