Das Grundprinzip des Boxmodells ist simpel. Jedes Element besteht aus einer Innenbox, deren Ausmaße Sie über width und height steuern können. An diesen Innenbereich schließt dann der Innenabstand an, den Sie über padding definieren.
Daran grenzt wiederum der Rahmen border, bei dem Sie neben der Breite über border-width auch noch die Farbe border-color und die Rahmenart border-style definieren können. Die Außenabstände schließlich bestimmen Sie über margin. Der Innenbereich ist bei allen Elementen vorhanden, die anderen Eigenschaften sind fakultativ, nicht jedes Element hat padding oder border.
Selbstverständlich müssen Sie nicht alle Eigenschaften explizit festlegen: Wenn Sie sie weglassen, verwenden Browser ihre internen Standardvorgaben. Beispielsweise hat ein Absatz (p) im Firefox automatisch einen margin rechts und links von 1em, das Gleiche gilt für ul-Elemente.
In Opera hingegen wird die Standardeinrückung von ul über 40px padding von links realisiert, und nach oben und unten sind es 16px margin. Hier gibt es also Unterschiede zwischen den Browsern, die sich vermeiden lassen, indem Sie explizite Angaben machen. Wie groß Breite, Höhe, padding, border und margin bei einem konkreten Element sind, verrät die Firefox-Erweiterung Firebug.
Bookmarks