CSS: Box-Modell

Erstellt: 19.04.2006 | Aktualisiert: 24.02.2009

XHTML-Elemente werden bei der Formatierung durch CSS als rechteckige Kästen (Box-Modell) interpretiert.

Kastenform (Box Model)

width
Breite des Elements
height
Höhe des Elements
padding
Abstand vom Rahmen zum Inhalt
border
Rahmen um das Element
margin
Äusserer Abstand

Falsche Interpretation IE 5.x

Leider wird das Box Model – obschon in der CSS2-Spezifikation definiert – von älteren Versionen des Internet Explorers (5.x) falsch interpretiert. Die Deklaration width bezeichnet die gesamte Breite des Blockelementes, das heisst inklusive padding und margin.

Dieser Umstand führte zu einigen Workarounds, um Websites sowohl für moderne Browser als auch den IE 5.x zugänglich zu machen. Unter der Weblinks sind einige wichtige Links betreffend Box Model zu finden.

Gestaltung mit CSS

Diese Kästen lassen sich mittels CSS natürlich prima gestalten. Einerseits können für padding oder margin Grössenangaben definiert werden, anderseits lassen sich den verschiedenen Eigenschaften auch Farben zuweisen. Auch der Rahmen kann ganz unterschiedlich gestaltet werden.

Verwandte Snippets

Weblinks