CSS Box Sizing: Width und Height ohne Padding und Border berechnen!

Wer Webseiten mit HTML und CSS programmiert, kennt das Problem bestimmt: Wenn man die Größe eines Elements mit “width” und “height” angibt, werden die Werte für den Rahmen “border” und den Innenabstand “padding” noch hinzu addiert. Das kann oft störend sein, wenn man eine feste Breiten- oder Höhen-Vorgabe hat. Wer trotzdem nicht auf padding und border verzichten möchte, kann einen einfachen Trick nutzen.

Box Sizing: Padding und Border von der Breite abziehen

Mit der CSS Eigenschaft “Box Sizing” lässt sich ganz einfach von dem normalen Modell umsteigen: Normalerweise werden padding und border automatisch addiert. Der Standard-Wert für die Eigenschaft lautet “content-box”. Ändert man diesen Wert dagegen auf “border-box”, berechnet der Browser die Größen anders: Hier geben jetzt width und height die Außenmaße vor: padding und border werden zwar immer noch angezeigt, aber innen abgezogen. Das ist oft praktischer, als das Addieren der Werte.

“Box Sizing” muss aber nicht für das gesamte Dokument umgestellt werden: Die Eigenschaft lässt sich auch nur für ein einzelnes Element umstellen. Damit ist dann sicher gestellt, dass alle Höhen und Breiten passen, ohne dass man die Berechnung selber bei der Programmierung vornehmen muss. Das ist gerade bei neuen praktisch, wenn sich Anfänge und Rahmen noch ändern können!

<div style="width:268px;padding:15px;border:1px solid #000;">
</div>

<div style="width:300px;padding:15px;border:1px solid #000;box-sizing:border-box;">
</div>

Beide DIV Elemente sind gleich breit: Bei dem unteren ist die Breite aber direkt ersichtlich. Hier ist es praktisch, dass durch “box-sizing:border-box;” die zusätzliche Breite für den inneren Rahmen-Abstand (“padding”) und den äußeren Rahmen von dem Maximal-Wert abgezogen werden. In der Standard-Einstellung werden sie hinzu addiert: Das muss man dann bei der Angabe von “width” unbedingt beachten.