Wer HTML hübsch machen will, braucht CSS. Und somit ein Grundverständnis dieser mächtigen Formatierungssprache. Objekte werden in CSS über das “Box Model” manipuliert. Lange Zeit konnte ich mir das Box Model nicht wirklich vorstellen, bis ich mir das Ding in InDesign nachgebaut habe (siehe Grafik oben).
CSS “Box Model”
Vergleiche die InDesign-Einstellungen im Screenshot oben:
- Content
- Padding
- Border
- Margin (wobei “Margin” nicht mit dem “Floating”, der eigentlichen “Konturenführung” zu verwechseln ist)
Im Code
Im CSS Code könnte dies dann wie folgt aussehen:
Was denkst du dazu?
2 Antworten
Gute Erklärung mit einem kleinen Haken: Dieses «Box-model» entspricht nicht ganz den offiziellen W3C-Spezifikationen; Padding und Border würden hierbei zum Content hinzugefügt werden.
Wenn du die Kontur innen ausrichtest und in deinem CSS-Code noch die Definition «box-sizing: border-box;» einfügst, würde das dann ziemlich genau stimmen. 🙂
Sehr cool, Danke!