Hauptmenü

Untermenü

CSS - Grundlagen - Boxmodel

1. Ein Wutanfall

Wer auch immer für diese Spezifikation verantwortlich ist, gehört an den Pranger oder was weiß ich nicht. Jedenfalls ist das Box-Modell, so wie es definiert wurde, der größte Schwachsinn, seit man bei IBM meinte, dass 1 MB Arbeitspeicher für PCs bis in alle Ewigkeit reicht. So, nach dieser kleinen Hasstirade werde ich euch erklären, warum ich so denke.

2. Geltungsbereich

Das Box-Model gilt für alle HTML-Tags, die Block-Elemente sind, sowie für alle Inline-Elemente, auf die die CSS-Anweisung display: block; angewendet wurde. Natürlich trifft das nicht auf Block-Elemente mit der CSS-Eigenschaft display: inline; zu. Näheres dazu erfahrt ihr später.

3. Bestandteile

Laut Spezifikation des W3C-Konsortiums besteht eine Box aus folgenden Elementen:

Wichtig dabei ist, dass sobald wir eine feste Höhe oder Breite angeben, sich dieses auf den Content-Bereich(!) bezieht. Eventuelle Angaben über den Rahmen oder den Innen- bzw. Außenabstand müssen zur angegebenen Größe hinzugerechnet(!) werden.

4. Grafischer Darstellung

Illustration des Box-Modells

5. Mathematik

Daraus ergeben sich folgende Konsequenzen, die ich an einem kleinen Beispiel erläutern möchte:

Wir haben irgendein Block-Element, dem wir eine feste Breite von 100 Pixeln und eine feste Höhe von 50 Pixeln zuweisen. Dem Rahmen geben wir eine Dicke von 5 Pixeln, und legen den Innenabstand auf 10 Pixel fest. Daraus ergibt sich dann folgende Gesamtgröße:

Gesamtbreite = Breite (100 Pixel) + linker Rahmen (5 Pixel) + rechter Rahmen (5 Pixel) + linker Innenabstand (10 Pixel) + rechter Innenabstand (10 Pixel)


100 10 10 130

Gesamthöhe = Höhe (50 Pixel) + oberer Rahmen (5 Pixel) + unterer Rahmen (5 Pixel) + oberer Innenabstand (10 Pixel) + unterer Innenabstand (10 Pixel)


50 10 10 80

Falls wir noch einen Außenabstand definieren, so muss der ebenfalls hinzugefügt werden. Allerdings hat er auf das eigentliche Aussehen keinen Einfluss. Stellt euch den als eine Art Abstandshalter oder Leerraum vor.

6. Fazit

Vielleicht versteht ihr jetzt schon meinen Gefühlsausbruch zu Beginn dieses Kapitels. Die Art und Weise, wie das Box-Modell aufgebaut ist, widerspricht der menschlichen Denkvorstellung. Man hat Irgendwas, und muss dem nun noch etwas hinzufügen, um das Ganze zu bekommen. Ich selber bin ständig am rumrechnen, wenn sich was ändert. Besonders problematisch wird es bei relativen Größenangaben, wo man je nach Design um spezielle JavaScript-Hacks nicht herum kommt.

7. Das fehlerhafte Boxmodell des Internet Explorers

Derselbe Teufel, der irgendjemanden beim W3C bei der Definition des Boxmodells geritten hat, muss auch ein paar Programmierer von Microsoft heimgesucht haben, als sie die Render-Engine des Internet Explorers 5.0 entwickelten. Also haben die sich wohl gesagt, die Definition ist sch***e, kein Mensch versteht das, also basteln wir mal was zusammen, das denen die Arbeit erleichtert.

Und so gingen sie dann genau so vor, wie man es aus anderen Produkten dieser Firma kennt. Das Denken wird vom Programm übernommen. So entwickelten sie ihr eigenes, und wie ich nach wie vor finde, logischeres Boxmodell. Die Angabe einer Breite/Höhe bezieht sich auf das komplette Element, inklusive Rahmen und Abstände. Man hat also etwas mit 100 Pixeln Breite, einem Innenabstand von 5 Pixeln und einem Rahmen von 2 Pixeln.

Dieses Element ist trotz allem nur 100 Pixel breit. Der Platz darin wird entsprechend aufgeteilt. Klingt sehr logisch und sinnvoll. Leider ist es kein Standard. Noch nicht, denn mit CSS3 ist es endlich eingeführt worden.

zurück zum vorherigen Abschnitt weiter zum nächsten Kapitel