{box-sizing: border-box} Box-Modell

box-model versus box-sizing: border-box

Die Ausmaße eines (block-level-)Elements ermitteln sich nach dem „normalen“ Box-Modell mit der Formel: width + padding + border.

Ein Container mit den Eigenschaften und Eigenschaftswerten:

div {
width: 300px;
height: 300px;
padding: 40px;
border: 20px solid black;
}

nimmt demnach insgesamt:

  • (von links nach rechts): 20px (border-links) + 40px (padding, Innenabstand-links) + 300px (Breite) + 40px (padding-rechts) + 20px (border-rechts) = 20+40+300+40+20 = 420px Breite
  • und (von oben nach unten): 20px (border-oben) + 40px (padding, Innenabstand-oben) + 300px (Höhe) + 40px (padding-unten) + 20px (border-unten) = 20+40+300+40+20 = 420px Höhe

für sich in Anspruch.

Dieser Container hat folgende Eigeschaften und Eigenschaftswerte width: 300px;
height: 300px; padding: 40px; border: 20px solid rgba(255,255,255, .6)

Diese Ermitlung hat in der Vergangenheit bei einigen Codern und Webdesignern zumindest für zeitweiliges Kopfzerbrechen gesorgt, gerade bei gefloateten Elementen und solchen, denen je nach Verwendung z. B. durch Zuweisung von (dynamischen) Klassen unterschiedliche Eigenschaftswerte wie border: 20px / border: 10px – padding: 20px / padding: 0px -zugewiesen wurden. Dadurch veränderte sich der von dem Element in Anspruch genommene Platz und ein mehrspaltiges Layout konte ohne Gegenmaßnahmen so schon mal anders aussehen als beabsichtigt.

Mit der Eigenschaft box-sizing und dem Wert border:box schlägt das Herz eines Webdesigners wieder etwas höher.

div {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 300px;
height: 300px;
padding: 40px;
border: 20px solid black;
}

Weiterlesen