Box-Modell

Die vom Browser erzeugte Box wird durch Höhe und Breite, aber auch durch Innen- und Außenabstände sowie Rahmen, festgelegt.

So müssen Sie bei Block-Elementen stets die tatsächliche Breite eines Elements berücksichtigen.

box-sizing

Mithilfe der Eigenschaft box-sizing lässt sich spezifizieren, worauf sich die Angaben von width bzw. height beziehen sollen.

Durch box-sizing: border-box werden Innenabstand und Randlinie nun ohne weitere Berechnung von uns durch den Browser bei der Breitenberechnung berücksichtigt.