Gestalten mit CSS – Das Box-Modell

In diesem Tipp wird Ihnen das Prinzip des Box-Modells bei der Gestaltung von Webseiten mit CSS (Cascading Style Sheets) erklärt. Wie bereits im Artikel Gestalten mit CSS – Rahmen und Abstände zu lesen war, gehe Ich hier unter anderem noch einmal genauer auf die Innen- und Außenabstände ein.[imgr=CSS-cascading-style-sheets2-200.gif]CSS-cascading-style-sheets2-200.gif?nocache=1304783693608[/imgr]
 

Jedem HTML Element wird ein rechteckiger Bereich zugeordnet. Dieser Bereich besteht aus dem Inhaltsbereich, den Innenabständen danach folgen der Rahmen und die Außenabstände. Normalerweise sind nicht immer alle Teilbereiche sichtbar.

(Zur Darstellung in Originalgröße Abbildungen anklicken)

Genaueres erkläre Ich Ihnen an folgendem Beispiel:

Auf dem Screenshot sehen Sie zwei „Boxen“. Die einzelnen Teilbereiche wurden mit CSS hervorgehoben und es wurden folgende Angaben verwendet:

Inhaltsbereich: 250px, Innen- und Außenabstände jeweils: 20px, Rahmen: 10px

Unter den beiden Boxen befindet sich eine horizontale Linie mit der Angabe width:310px. Wie Sie sehen können, ist die Linie genauso lang wie die Boxen obwohl diese einen eigentlichen Inhaltsbereich von 250px haben.

Dies lässt sich folgendermaßen Erklären: Auf Grund des Box-Modells müssen zusätzlich zum Inhaltsbereich auch der Rahmen und die Außenabstände addiert werden. In diesem Beispiel bedeutet das: 250px + 40px (Außenabstände links und rechts zusammen) + 20px (Rahmen links und rechts zusammen) = 310px Gesamtbreite.

Zusätzlich fällt noch auf, dass der Abstand zwischen den beiden Boxen nur 20px beträgt obwohl er eigentlich 40px betragen müsste. Das Box-Modell besitzt die Eigenschaft vertikale Außenabstände zusammen zu fassen. Bei unterschiedlich großen Außenabständen wird der kleinere „verschluckt“.

Erweiterte Definition von Breite und Höhe

Die bereits bekannten Angaben width(Breite) und height(Höhe) können noch detaillierter beschrieben werden. Mit den Ergänzungen max- und min- lässt sich die Größe der Box neu definieren.
Mit max-width(height) wird die maximale Größe des Elements bestimmt, mit min-width(height) die kleinste erlaubte Größe. Eine Angabe in Prozent ist in beiden Fällen ebenfalls möglich.

Der einzige Unterschied bei den Angaben zu width und height liegt bei der Interpretation falls keine Angaben vorhanden sind. Bei fehlender height Angabe ist die Box gerade so groß wie das Element Platz benötigt. Bei fehlender width Angabe wird dagegen der gesamte verfügbare Platz von der Box eingenommen.

Overflow zur Definition des Inhaltes

Mit der Eigenschaft overflow lässt sich beschreiben was genau mit dem Inhalt geschehen soll, falls dieser größer als der gegebene Bereich ist. Es existieren drei verschiedene Angaben:

[*]Hidden: der Inhalt wird einfach abgeschnitten

[/*][*]Scroll: es werden Scroll Balken eingeblendet und der Bereich bleibt dadurch unverändert

[/*][*]Visible: der gesamte Inhalt wird angezeigt, wobei der Box-Bereich ignoriert wird und der Inhalt „herausströmt“[/*]

Um fehlerfreie Layouts mit CSS zu gestalten, gehört das Verstehen und Verwenden des Box-Modells zu den Grundlagen. Eine falsche Angabe kann dazu führen, dass das ganze Layout „zerschossen“ wird. Bei komplexen Webseiten ist die Fehlersuche meist anstrengender als eine komplette Neugestaltung.

zurück zur Übersicht Themenübersicht – Webdesign mit CSS