Breite von HTML-Elementen mit padding und border
Breite und Höhe von HTML-Elementen werden vom Box-Modell gesteuert. Die Kombination von padding, border und width bildet die Breite, mit der ein Block im Viewport des Browsers gerendert wird. Die einfache Angabe der Breite für einen Block reicht nicht ohne Weiteres, um den Raum für ein Layout-Element in der Webseite zu bestimmen.
padding + border + width = tatsächliche gerenderte Breite padding + border + height = tatsächliche gerenderte Höhe
Das padding zählt mit zur Breite bzw. Höhe der Box, und wird oft in anderen Maßeinheiten notiert – z.B. in rem, em oder ch, während die Breite der Box in %-Werten oder Pixel angegeben wird.
margin – der horizontale bzw. vertikale Abstand zwischen benachbarten Blöcken – spielt in dieser Berechnung keine Rolle, obwohl die Eigenschaft margin beim Element notiert wird.
Die Berechnung der tatsächlich gerenderten Breite ist schon bei Pixelangaben aufwändig, aber wenn drei Blöcke den verfügbaren Platz einnehmen sollen, ist das Box-Modell überfordert.
.boxmodell div {
width: 27%;
padding: 1em;
border: 1px solid blue;
}
27% + 2×1em + 2×1px – das funktioniert nicht zuverlässig bei allen Monitorbreiten und nimmt nie den Raum ein, der zur Verfügung steht.
Wenn Blöcke in relativen Breiten – mit Prozentangaben – angelegt werden, ist box-sizing der Rettungsanker. Wie sonst könnten wir einen Block mit padding und border auf eine exakte Breite festlegen?
box-sizing: border-box: Größe mit padding und border
Erst box-sizing macht die Berechnung von Breite und Höhe intuitiv. Wo Eigenschaften wie width, padding und border zu den beliebtesten Fehlern führen, ist ein Block mit box-sizing und width:200px auch tatsächlich 200px breit.
Das sorgt dafür, dass Elemente in den vorgesehen Raum passen, ohne dass wir die Breite von padding und border subtrahieren müssen. Das CSS wird verständlicher und besser lesbar.
Für einen HTML-Block 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 und der Inhalt auf den verbleibenden Raum beschränkt.
.box {
box-sizing:border-box;
width: 49%;
border:4px solid blue;
padding: 10px;
}
Das funktioniert zuverlässig.
box-sizing content-box | border-box
- content-box (default)
- ist die Voreinstellung. Breite und Höhe (sowie min-width und min-height, max-width und max-height) legen die ursprüngliche Höhe und Breite des Elements fest. padding und border liegen um den Block herum.
- border-box
- padding und border liegen innerhalb des Blocks. Abfragen zur Breite und Höhe des Elements geben Null zurück, wenn bei der Berechnung negative Werte entstehen würden.
box-sizing für ALLES!
Viele Webdesigner und Entwickler wie Paul Irish empfehlen, border-box für alle Elemente der Seite einzusetzen, um das Layout einfach zu halten.
*, *:before, *:after {
box-sizing: border-box;
}
Die CSS-Frameworks wie Foundation und Bootstrap haben box-sizing bereits eingebaut.
