Breite und Höhe im Box-Modell
Das Box-Modell gibt einen weiträumigen Spielraum für das Layout von Webseiten, aber das Box-Modell und seine Regeln sind keineswegs intuitiv.
Jedes Block-Element (div, p, table, …) dehnt sich über die gesamte Breite der umfassenden Box aus, wenn width für das Element nicht angegeben ist. Inline-Elemente wie a, span und strong nehmen innerhalb der umfassenden Box genau den Platz für ihren Inhalt ein.
Ein funktionierendes Layout erfordert neben korrektem HTML die akurate Berechnung der Dimensionen der Boxen. Das ist komplizierter als es auf den ersten Blick wirkt.
Ein Text in einem p-Tag fließt so breit wie das div-Tag, in dem das p-Tag liegt. Das div-Tag ist 400px breit: Das p-Tag bildet darum eine Box von 400px Breite. Ein a-Tag innerhalb des p-Tags bildet eine Box, die genauso groß ist wie ihr Text.
<div style="background-color: yellow; width: 300px;">
<p style="background-color: blue"> … <a
…
style="background-color:gray;color:white;">… </a>
</p>
</div>
Regel 1: Volle Breite
Ohne die Angabe einer Breite nimmt eine Box immer die volle Breite der umfassenden Box ein.
Hier ist auch eine Inline-Box eingebettet.
Der gelbe Hintergrund des div-Tags ist nicht sichtbar, denn die Box für das p-Tag nimmt ohne margin oder Breitenangabe den vollen Raum des div-Blocks ein.
Regel 2: padding und border erweitern den Raum der Box
Die Breite von padding und border wird zur Breite der Box hinzugerechnet.
Wird für das p-Tag border oder padding angegeben, dann addieren sich die Angaben für border und padding zur Breite der p-Box. Aber die Box für p nimmt weiterhin genau denselben Raum innerhalb der div-Box ein.
Ein Text in einem p-Tag fließt so breit wie das div-Tag, in dem das p-Tag liegt. Das div-Tag ist 400px breit: Das p-Tag bildet darum eine Box von 400px Breite. Ein a-Tag innerhalb des p-Tags bildet eine Box, die genauso groß ist wie ihr Text.
Regel 3: margin verkleinert den Raum
Wird für das p-Tag margin – ein Abstand zur umfassenden Box – angegeben, wird der Hintergrund des umfassenden Blocks sichtbar.
Der Text im p-Block hält jetzt einen Abstand von 50px vom rechten Rand der umfassenden div-Box:
<p style="margin-right:50px;"> …
margin ist umstritten: Die einen sagen, margin gehört zur Breite des Elements, andere sagen, margin gehört nicht zur Breite des Elements. Auf jeden Fall aber können wir jetzt berechnen, wie breit der Text nun läuft:
400px - 2 x 5px border - 2 x 10px padding - 50px margin = 320px
Regel 4: Ein übergroßer Block dehnt die umfassende Box
Komplizierter wird es, wenn eine Box in einer Box die Maße der umgebenden Box sprengt.
Die p-Box in der div-Box ist jetzt 500px breit. Dazu kommen border und padding und am Ende auch noch der Abstand zur rechten Seite: margin.
Die umfassende Box – das div-Tag – wird jetzt über seine Breite von 400px hinaus ausgedehnt, damit die übergroße p-Box hineinpasst.
Regel 5: Bei Übergrößen kollabiert margin
Die übergroße Box dehnt die umfassende Box aus, aber der Abstand margin kollabiert dabei. Darum ist der gelbe Hintergrund der div-Box nicht mehr sichtbar.
box-sizing: border-box
CSS box-sizing macht alles viel einfacher und sorgt dafür, dass Elemente in den vorgesehen Raum passen, ohne dass wir uns mit margin, padding und border herumschlagen müssen.
Für einen HTML-Block – z.B. ein div – wird box-sizing als border-box notiert. Das zwingt den Browser, den kompletten Block innerhalb der angegebenen Breite zu rendern. padding und border werden innerhalb der Box gerendert.
.box {
box-sizing:border-box;
width: 49%;
border:4px solid white;
padding: 10px;
}