• Skriptum
• CSS
• Spezialthemen
• Box-Modell

Box-Modell

In CSS ist definiert, dass jedes HTML-Element bei der Darstellung im Browser eine Elementbox erzeugt. Diese ist eine rechteckige Fläche für den Inhalt des HTML-Elements und kann weitere Stilelemente wie Rahmen, Hintergrundfarben und Hintergrundbilder umfassen. Der Aufbau der Elementbox wird Box-Modell genannt.

Die Elementboxen dienen dazu, die Abmessungen der Darstellungsfläche vorzugeben, das Aussehen der Stilelemente (Rahmen, Hintergrundfarben, Hintergrundbilder, Deckkraft/Transparenz) sowie die Abstände zwischen ihnen festzulegen als auch die Platzierung und Abstände der Elementboxen unterschiedlicher HTML-Elemente zueinander zu bestimmen.

Aufbau des Box-Modells

Die Elementbox des Boxmodells von CSS ist wie die Schichten einer Zwiebel aufgebaut und umfasst von innen nach außen den:

• Inhalt: content (Inhalt)
• Innenabstand: padding (Auspolsterung, Füllmaterial)
• Rahmen: border (Rahmen)
• Außenabstand: margin (Rand, Saum, Spielraum)

Hier ein Beispiel mit blauen Rahmen und hellgelber Hintergrundfarbe, wobei der Rahmen sowei der Innen- und Außenabstand jeweils 2em breit sind:

CSS-Eigenschaften für das Box-Modell

Es gibt einige CSS-Eigenschaften mit denen man das Erscheinungsbild der einzelnen Schichten und auch der verschiedenen Stilelemente festlegen kann.

Es gibt dabei Eigenschaften für die Abmessungen der Schichten, durch die das Layout festgelegt wird.
Und es gibt Eigenschaften für Formatierungen der Stilelemente, durch die das Aussehen festgelegt wird.

In Folge wird ein Überblick für das Zusammenspiel gegeben. Die Details in eigenen ...

Inhalt des HTML-Elements 
(z.B. Text (Überschriften, Absätze, Listen, Tabellen) und Grafik
s der umgeben die Inhalte jedes einzelnen HTML-Elements,.

Diese Elementboxen dienen dazu, mit einigen CSS-Eigenschaften
die Abmessungen des Raums festzulegen, den der Inhalt einnehmen kann,
um Abstände zwischen den Inhalten der einzelnen HTML-Elemente zu erzeugen,
um den Abstand zwischen Inhalt und Rahmen vorzugeben,
die Größe der Fläche des Hintergrundes (Hintergrundfarben und -bilder) zu bestimmen.

Inhalt (content)

Der Inhalt umfasst alles, das im Gültigkeitsbereich des HTML-Elements steht: das können Texte sein (wie bei: Absätze, Überschriften, Listen, etc.), andere HTML-Elemente oder Inhalte bei ersetzten HTML-Elementen (z.B. ein Bild beim Element img).

• CSS-Eigenschaften: width, height, sowie min-width, min-height und max-width, max-height
• Wird in CSS kein Wert für width oder height deklariert, so wirkt der Defaultwert (Initialwert) von auto; dies bewirkt bei Block-Elementen, dass die Box so breit wie möglich und so hoch wie nötig ist und bei Inline-Elementen, dass die Box so breit als auch so hoch wie nötig ist.
  Ist für width oder height kein Wert oder auto; deklariert, so kann die Breite bzw. Höhe durch deklarieren von Werten für min-width und max-width sowie min-height und max-height begrenzt werden.
• Ist eine Hintergrundfarbe oder -bild deklariert, so ist dies im Bereich des Inhalts sichtbar.

Innenabstand (padding)

Der Innenabstand bestimmt die Entfernung zwischen Außenkante des Inhalts und der Innenkante des Rahmens, und - auch wenn kein Rahmen deklariert ist - die Entfernung zwischen Außenkante des Inhalts und der Außenkante des Hintergrundes (Hintergrundfarben und -bilder).

• CSS-Eigenschaft: padding (kann für alle vier Seiten unterschiedlich deklariert werden)
• Wird in CSS kein Wert deklariert, so wirkt der Defaultwert (Initialwert) von 0; also der Innenabstand ist "nicht vorhanden".
• Ist eine Hintergrundfarbe oder -bild deklariert, so ist dies im Bereich des Innenabstands sichtbar.

Rahmen (border)

Ist der Rahmen, wie er mit der CSS-Eigenschaft border definiert wird.

• CSS-Eigenschaft: border (kann für alle vier Seiten unterschiedlich deklariert werden)
• Wird in CSS kein Wert deklariert, so wirkt der Defaultwert (Initialwert) von none; also der Rahmen ist "nicht vorhanden".
• Ist eine Hintergrundfarbe oder -bild deklariert, so ist dies im Bereich des Rahmens sichtbar - natürlich nur, wenn der Rahmen Zwischenräume aufweist, also bei punktiert (dotted), strichliert (dashed) und doppelt (double).

Außenabstand (margin)

Bestimmt die Entfernung zwischen Außenkante des Rahmens und anderen HTML-Elementen, die an dieses grenzen oder es umgeben.

• CSS-Eigenschaft: margin (kann für alle vier Seiten unterschiedlich deklariert werden)
• Wird in CSS kein Wert deklariert, so wirkt der Defaultwert (Initialwert) von 0; also der Außenabstand ist "nicht vorhanden".
• Der Bereich des Außenabstands ist immer transparent (durchsichtig), ist eine Hintergrundfarbe oder -bild deklariert, so werden diese im Bereich des Innenabstands nicht dargestellt.

In oberer Abbildung sieht man so eine Elementbox für einen Absatz. Die grellen Farben dienen nur zur Illustration, sie sind nicht Teil der CSS-Regel.
Der Absatz in diesem Beispiel hat einen Außenabstand (margin) von 30 Pixel, einen Rahmen (border) von acht Pixel und einen Innenabstand (padding) von 30 Pixel: p { margin: 30px; border: 8px; padding: 30px; }.
Der gelb eingefärbte Bereich ist der Außenabstand (margin), der grün eingefärbte ist der Rahmen (border) und der rot eingefärbte ist der Innenabstand (padding).

Veranschaulichung: Rahmen

Die CSS-Eigenschaft die bei Rahmen bezüglich des Boxmodells eine Rolle spielt ist die Stärke des Rahmens, also border-width. Das Formatieren des Rahmens einer Box ist auch für die meisten Anfänger/innen kein Problem, da Rahmen sichtbar und somit "begreifbar" sind und auch weil Rahmen vertraut sind, da man schon meist in der Kindheit Rahmen gezeichnet hat.

Wie man Rahmen LINK zu CSS eigenschaften Rahmen

Was man jedoch bedenken muss, ist dass vorhandene Rahmen eine Breite haben und dass diese nicht in der angegebenen Breite width einer Box inkludiert sind (siehe auch LINK). Daher darf man nicht vergessen die Stärke des Rahmens border-width beim Platzbedarf der Box zur angegebenen Breite width dazuzählen (addieren). Dies gilt insbesondere, wenn man ein "pixelgenaues" Layout verwendet, denn dann kann jedes einzelne Pixel schon dazu führen, dass es nicht so klappt wie man es gedacht hat. Somit können auch hauchdünne Rahmenlinien von nur einem Pixel, die man ansonsten kaum in Betracht ziehen würde, zu Problemen führen.

p {
   width: 400px;
   background-color: #FFFF99;
}

p {
   width: 400px;
   border-width: 0 50px;
   border-style: solid;
   background-color: #FFFF99;
}

Veranschaulichung: Innen- und Außenabstand

Der Innenabstand bestimmt den Abstand zwischen dem Inhalt (Text, Bild, …) und Rahmen bzw. zwischen Inhalt und der Außenkante der eingefärbten Fläche oder des Hintergrundbildes.

Der Außenabstand bestimmt den Abstand des Inhalts (inklusive des Rahmens, Hintergrundfarbe oder -bild) zu anderen, angrenzenden bzw. umgebenden HTML-Elementen.

p {
   border: solid 3px #CC0033; 
   padding: 0; 
   margin: 0;
}

p {
   border: solid 3px #CC0033;
   padding: 20px;
   margin: 0;
}

p {
   border: solid 3px #CC0033;
   padding: 0;
   margin: 20px;
}

p {
   border: solid 3px #CC0033;
   padding: 20px;
   margin: 20px;
}

Veranschaulichung: Inhalt (Breite und Höhe)

Werte für die Breite width

Deklariert man keine Breite, so wirkt der Defaultwert (Initialwert) auto. Dies bewirkt bei Block-Elementen, dass die Box so breit wie möglich ist und bei Inline-Elementen, dass die Box so breit wie nötig ist.

Was genau "so breit wie möglich" bedeutet, sieht man unter LINK Vorerst beschäftigen wir uns mit konkreten Angaben einer Breite.

p {
   width: auto;
   background-color: #FFFF99;
}

p {
   width: auto;
   background-color: #FFFF99;
   margin: 0 100px;
}

p {
   width: auto;
   background-color: #FFFF99;
   margin: 0 100px;
   border-width: 0 5px;
   border-style: solid;
   border-color: #999999;
}

Wenn man der Box mit width eine bestimmte Breite gibt, so bezieht sich diese nur auf den Inhalt (content).

Hat eine Box jedoch für eine oder mehrere der Schichten (Innenabstand, Rahmen, Außenabstand) einen Wert größer als 0, so belegt die Box eine größere Fläche als der Wert für width angibt.

Wenn eine Box dabei einen Rahmen oder einen Hintergrund (Hintergrundfarbe oder -bild) hat, so sieht sie breiter aus, als der Wert für width angibt. In der Praxis muss man aufpassen, da man sehr leicht verleitet ist zu glauben, dass sich der Wert von width auf diese "optische Breite" bezieht. Mit den Werten von den anderen Schichten ergibt sich dann aber eine viel breitere Box als man geplant hat. Anmerkung: Der Microsoft Internet Explorer hat in früheren Versionen den Wert von width falsch zugewiesen, und zwar der "optischen Breite" inklusive der Ausdehnung von Innenabstand und Rahmen. Daher wurden die Boxen sehr oft zu klein dargestellt. Dieser Fehler ist aber schon vernachlässigbar, da er nur bis zur Version Version 5.5 und auch noch in der Version 6 im Quirks-Mode vorhanden ist. (siehe auch CSS4You: Browser und das Boxmodell)

p {
   width: 200px;
   background-color: #FFFF99;
}

p {
   width: 200px;
   padding: 0 50px;
   background-color: #FFFF99;
}

p {
   width: 200px;
   border-width: 0 25px;
   border-style: solid;
   background-color: #FFFF99;
}

p {
   width: 200px;
   padding: 0 50px;
   margin: 0 100px;
   background-color: #FFFF99;
}

Werte für die Höhe heigth

Deklariert man keine Höhe, so wirkt der Defaultwert (Initialwert) auto. Dies bewirkt sowohl bei Block-Elementen als auch bei Inline-Elementen, dass die Box so hoch wie nötig ist.

p {
   width: auto;
   background-color: #FFFF99;
}

p {
   width: auto;
   background-color: #FFFF99;
   margin: 0 100px;
}

p {
   width: auto;
   background-color: #FFFF99;
}

In der Praxis wird meistens in irgend einer Weise die Breite der Boxen vorgegeben, aber die Höhe wird flexibel belassen. Dies bedeutet, dass sich die Höhe jederzeit ändern kann. Dies sind wir aber gewöhnt, da die bei jedem Text so ist, sei es in einer Textverarbeitung oder wenn man mit der Hand schreibt. Hat ein Buch mehr Text, so wird es nicht breiter, sondern es hat mehr Seiten, was gleichbedeutend ist, mit der Text ist höher.

Gibt man zu einer fixierten Breite auch noch eine fixierte Höhe an, so kommt es meist zu Problemen mit einem "Überlauf". Es gibt viele Möglichkeiten, dass der Text mehr Platz benötigt als geplant - aber die Box kann nicht höher werden. Somit läuft die Box über. Um dies in den Griff zu bekommen gibt es mehrere Varianten, die aber nur in einigen Fällen sinnvoll sind.

siehe auch overflow

Berechnung

Berechnung

Die Fläche, die eine Elementbox einnimmt, setzt sich aus allen Schichten der Box zusammen.

Das Ausmaß in der Horizontalen (waagerecht) ist, von links nach rechts gemessen, die Summe der Ausdehnungen von:
linker Außenabstand + linke Rahmenstärke + linker Innenabstand +
Inhalt +
rechter Innenabstand + rechte Rahmenstärke + rechter Außenabstand

Jeden der einzelnen Schichten kann man mit CSS-Regeln einen Wert für die Ausdehnung (Größe) zuweisen und zwar mit folgenden Eigenschaften:
linker Außenabstand: margin-left
linker Rahmen: border-left-width
linker Innenabstand: padding-left
Inhalt (Breite): width
rechter Innenabstand: padding-right
rechter Rahmen: border-right-width
rechter Außenabstand: margin-right

Das Ausmaß der Box (Gesamtbreite) ist daher margin-left + border-left-width + padding-left + width + padding-right + border-right-width + margin-right.

Darstellung im Container (Verschachtelung)

Die Struktur von HTML-Elementen in einer HTML-Datei ist so, dass sie hintereinander platziert oder in einander verschachtelt sein können. Genauer betrachtet befindet sich sogar jedes HTML-Element (das dargestellt werden soll) verschachtelt in einem anderen. Sebst das Element <body> befindet sich im Element <html>.

Betrachtet man die Struktur aus Sicht des DOM (Document Objekt Modell), wie im Kapitel über Dokumentstruktur beschrieben, hat jedes HTML-Element ein Eltern-Element innerhalb dessen es sich als Kind-Element befindet.

Bei der Darstelleung in einem Browser hat dieses Eltern-Element die Funktion eines Containers, innerhalb dessen alle seine Kind-Elemente dargestellt werden. Das heißt, dass das Eltern-Element den Platz beschränkt, den ein Kind-Element einnehmen kann. Genauer gesagt, ist es der Inhaltsbereich (content) des Eltern-Elements, innerhalb dessen alle Kind-Elemente eines Eltern-Elements dargestellt werden.

Blockelemente

Wenn das Kind-Element ein Block-Element ist und keine Breite width deklariert hat, so ist dieses so breit wie möglich. Es füllt daher waagrecht den gesamten Inhaltsbereich des Eltern-Elements aus. Somit bestimmt ein Eltern-Element die waagrechten Ausmaße seiner Kind-Elemente.

Andererseits ist das Kind-Element, wenn es keine Höhe heigth deklariert hat, so hoch wie nötig siehe oben. Jedes Kind-Element drückt den Inhaltsbereich des Eltern-Elements auseinander. Für die Höhe des Eltern-Elements bedeutet das "so hoch wie nötig", dass die Höhe die Summe der Ausmaße der Kind-Elemente entspricht. Somit bestimmen die Ausmaße (Höhen und Abstände) der Kind-Elemente die senkrechte Höhe des Eltern-Elements.

Hat das Kind-Element einen Innen- bzw. Außenabstand größer als 0 und/oder einen Rahmen, benötigen diese ebenfalls einen Platz. Da aber der Inhaltsbereich vom Eltern-Element gleich bleibt, wird die Breite width des Kind-Elements zusammengedrückt.

Die Besonderheit von Außenabständen ist, dass sie negative Werte annehmen können. Wenn z.B. ein positiver linker Außenabstand den Inhalt nach innen drückt, so drückt ein negativer Wert den Inhalt nach außen.

Anmerkung: Rahmen, Innenabstände und auch Breite sowie Höhe können keine negativern Were annehmen.

Das HTML-Element body

wenn breite nicht angegeben

wenn breit - dann margin-right

textfluss - verschachtelung

Von innen nach außen betrachtet kommt zuerst der Text in einem Rechteck, er ist der Inhalt (content-box). Um dieses Rechteck herum kommt das nächste, um wieviel größer, gibt der Innenabstand (padding) an. Dann kommt der Rahmen, dessen Stärke mit border-width (oder der in Kurzform border) angegeben ist. Das äußerste Rechteck ist wieder größer, um wieviel größer, gibt der Außenabstand (margin) an.

Die Gesamtbreite ist daher margin + border-width + padding + Breite der content-box + padding + border-width + margin, die Gesamthöhe ist daher margin + border-width + padding + Höhe der content-box + padding + border-width + margin.