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.
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.