Das CSS Box Model beschreibt, wie HTML-Elemente auf einer Webseite dargestellt werden. Jedes HTML-Element wird als Rechteck betrachtet und besteht aus mehreren Schichten. Die äußerste Schicht ist die Border (die Umrandung), gefolgt von dem Padding (sozusagen der “Polsterung”) und dem Content (dem Inhalt). Der Abstand zu dem vorherigen und nachfolgenden Element wird mit dem Margin (dem Abstand) festgelegt.

Die Border definiert die Grenze des Elements und kann mit CSS gestaltet werden. Das Padding ist der Abstand zwischen dem Inhalt und der Border. Der Inhalt enthält den eigentlichen Text oder das Bild des Elements bzw aller Elemente darin.

Die Gesamtgröße des Elements wird als Breite und Höhe einschließlich der Margin- und Padding berechnet. Das Element skaliert sich je nach Inhalt, ausser die Größe ist mit CSS fix festgelegt. Wenn der Inhalt dann größer ist als die Größe des Elements, wird er abgeschnitten und kann z.B. durch Scrollen angezeigt werden.