Breite und Höhe im Box-Modell
Die einfache Angabe der Breite allein reicht allerdings nicht, um den Raum für ein Layout-Element zu berechnen. Das Box-Modell bietet ein weiträumiges Spielfeld 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.
Regel 1: Block-Element = Volle Breite
Ohne die Angabe einer Breite nimmt eine Box immer die volle Breite der umfassenden Box ein.
Ein Text in einem p-Tag fließt so breit wie das div-Element, in dem das p-Element liegt. Das div-Tag ist breit: Das p-Tag bildet darum eine Box von Breite. Ein a-Tag innerhalb des p-Tags bildet eine Box, die genauso groß ist wie ihr Text.
<div style="background-color: blue;">
<p style="background-color: gray">
…
<a style="background:darkgray;color:white;">… </a>
</p>
</div>
Hier ist auch eine Inline-Box eingebettet.
Der blaue 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-Element, in dem das p-Element liegt. Das div-Element ist px breit: Das p-Tag bildet darum eine Box von px Breite. Ein a-Tag innerhalb des p-Tags bildet eine Box, die genauso groß ist wie ihr Text.
p.bggray {
background-color:silver;
padding:10px;
border:2px solid gray
}
Regel 3: margin verkleinert den Raum
Wird für das p-Element 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.
div {
background: blue;
width: 400px;
}
p {
background: gray;
width: 500px;
max-width: calc(100vw - 2rem);
margin-right: 50px;
}
Die umfassende Box – das div-Element – wird jetzt über seine Breite von 400px hinaus ausgedehnt, damit die übergroße p-Box hineinpasst. Für die ViewPorts der mobilen Geräte muss das p-Element begrenzt werden, damit die Seite nicht »schwimmt«.
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;
}
