Box-Modell-Grundlagen

Das Box-Modell beschreibt, wie jedes Element auf einer Webseite aufgebaut ist und wie es Platz einnimmt. Egal ob Text, Bild, Button oder Container – im Browser wird alles als rechteckige Box dargestellt. Diese Box besteht aus mehreren Schichten, die sich von innen nach außen aufbauen.

Im Zentrum steht der Content, also der eigentliche Inhalt eines Elements. Um diesen Inhalt herum liegen drei weitere Bereiche: Padding, Border und Margin. Gemeinsam bestimmen sie, wie viel Platz ein Element auf der Seite benötigt und wie viel Abstand es zu anderen Elementen hat.

Box Modell

CSS Box Modell

Box Modell im Broweser

CSS Box Modell im Browser

Content – Inhalt

Die Fläche, die durch Texte (Schriftgröße) und Bilder (Bildgröße) oder Eigenschaften wie width (Breite) und height (Höhe) vorgegeben wird.

Padding – Innenabstand

Nach dem Content folgt in jeder Box der Innenabstand (padding). Das Padding liegt innerhalb der Box und übernimmt – wenn definiert – die Hintergrundfarbe des Inhaltsbereichs.

Border – Rahmen

Um das Padding legt sich der Rahmen (border), der Rand der Box, der eine eigene Breite (width), Linienart (style) und Farbe (color) annehmen kann.

Margin – Außenabstand

Jede Box hat einen Außenabstand (margin), der ebenfalls für alle vier Seiten der Box einzeln definiert werden kann.

Jede Seite einer Box wird dabei einzeln angesprochen: top, right, bottom und left. Das ermöglicht es, Breiten und Abstände sehr präzise festzulegen.

CSS Box Modell Seiten

  • top ist die obere Seite

  • right die rechte Seite

  • bottom ist die untere Seite

  • left die linke Seite

Box Modell verändern

Die Breite der Elemente wird über das Box Modell gesteuert. Wenn ein Element eine Breite (width) von 300px hat, hat der Content eine Breite von 300px. Werden padding (20px) und border (4px) hinzugefügt, verbreitet sich das Element auf 348px.

CSS Box Modell Box-sizing

CSS Box Modell Box-sizing Layout

Um das Box Modell zu ändern, wird die Eigenschaft box-sizing verwendet.

Übersicht

Eigenschaftswert

Erklärung

content-box

Das ist der Standardwert. Die angegebene Breite bezieht sich nur auf den Content.

border-box

In die angegebene Breite werden Innenabstand und Rahmen eingerechnet.

Beispiel

.container {
  box-sizing: border-box;
}