Anhang: CSS-Boxmodell
Referenz: Box-Modell im selfHTML Wiki und in
css4you.
Die Eigenschaften left (links), right (rechts), top (oben)
und bottom (unten) sowie alternativ width (Breite) und height
(Höhe) legen die Position eines Blockelements fest. Und zwar immer relativ zum
übergeordneten Blockelement. Voraussetzung dafür ist die Angabe der Positionsart
mit position: absolute;, position: relative; oder position: fixed;.
Normales Box-Modell
Box-Modell
| | | | | | top | | | | | |
| | | | | | margin | | | | | |
| | | | | | border | | | | | |
| | | | | | pading | | | | | |
| | | | | ⇱ | width | ↤ | | | | |
| left | | | | height | Ein beliebiger
Inhalt der Box! | | | | | right |
| | | | | ↥ | | | | | | |
| | | | | | | | | | | |
| | | | | | | | | | | |
| | | | | | | | | | | |
| | | | | | bottom | | | | | |
- margin = Außenabstand,
- border-size= Rahmendicke,
- padding = Innenabstand
100% des Anzeigefenster oder des übergeordneten Blockelements entsprechen:
- left + margin(-left) + border-size +
padding(-left) + width + padding(-right) +
border-size + margin(-right) + right
- top + margin(-top) + border-size +
padding(-top) + height + padding(-bottom) +
border-size + margin(-bottom + bottom
Anpassen des Modells
Sie können das Box-Modell mit der Eigenschaft box-sizing [w,c] anpassen:
- content-box
- Normales Box-Modell (Standardwert, W3C-Standard)
- padding-box
- Die Box bleibt auch mit Innenabstand gleich groß, für den eigentlichen Inhalt steht dann weniger Platz zur Verfügung.
- 100% = left + margin(-left) + border-size + width + border-size + margin(-right) + right
- border-box
- Eine Box mit Rahmen und Innenabstand bleibt insgesamt genauso hoch und breit, wie über das CSS definiert
- 100% = left + margin(-left) + width + margin(-right) + right
- margin-box
- Eine Box mit Außernabstand, Rahmen und Innenabstand bleibt insgesamt genauso hoch und breit, wie über das CSS definiert
- 100% = left + width + right