Das Boxmodell ist eines der wichtigsten Konzepte von CSS: Es bestimmt das Aussehen aller Kästchen, die Ihr Layout ausmachen. In diesem Workshop erfahren Sie neben den Basics auch viele nützliche Profi-Tricks.
Quote:
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.
SpoilerIn unserem Beispiel ist die Box 400px breit: 300px + (2*40px) + (2*10px):
Ältere Internet-Explorer-Versionen rechnen hier anders: Sie nehmen den bei width angegebenen Wert als Gesamtbreite und stellen die Box 300px breit dar, der Innenbereich hat dementsprechend nur eine Breite von 200px (300px-80px-20px).
Diese andere Interpretation begegnet Ihnen beim Internet Explorer bis einschließlich Version 5.5 und auch bei neueren Internet-Explorer-Versionen, die sich im Quirksmodus befinden. Um den IE in den Standardmodus zu setzen, müssen Sie zu Beginn des Dokuments eine vollständige Dokumenttypangabe schreiben, also etwa:
<!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/
xhtml1-transitional.dtd">
