Box-Modell (Eigenschaft box-sizing)

Der Default-Wert für die CSS-Eigenschaft box-sizing in content-box, oftmals ist aber der Wert border-box zu bevorzugen, weil hierbei Rand und/oder Padding (Innenabstand) in der Größe des Elements enthalten ist.

Referenzkasten mit width:5em und height:5em

Referenzkasten mit Rand von 1em Breite mit content-box

Der Rand wird zu der mit width und height definierten Größe hinzuaddiert.

Referenzkasten mit Rand von 1em Breite mit border-box

Der Rand ist in der mit width und height definierten Größe enthalten.

Referenzkasten mit Padding von 1em Breite mit content-box

Das Padding (Innenabstand) wird zu der mit width und height definierten Größe hinzuaddiert.

Referenzkasten mit Padding von 1em Breite mit border-box

Das Padding (Innenabstand) ist in der mit width und height definierten Größe enthalten.

Referenzkasten mit Padding+Rand von jeweils 1em Breite mit content-box

Referenzkasten mit Padding+Rand von jeweils 1em Breite mit border-box