Das CSS Box-Modell

Das CSS Box-Modell beschreibt, wie der Browser jedes HTML-Element als rechteckige Box darstellt. Diese Box besteht aus vier Bereichen: Content, Padding, Border und Margin.

Wenn du verstehst, wie diese Bereiche zusammenarbeiten, kannst du Abstände, Größen und Layouts in CSS viel besser kontrollieren.

Inhalt (Content)

Der Content ist der eigentliche Inhalt eines Elements. Dazu gehören zum Beispiel Text, Bilder, Videos oder andere HTML-Elemente.

1<div class="box">
2    Hallo Welt!
3</div>

1.box {
2    width: 200px;
3    height: 100px;
4}

Mit width und height bestimmst du die Breite und Höhe des Inhaltsbereichs. In diesem Beispiel ist der Content 200 px breit und 100 px hoch.

Padding (Innenabstand)

Padding ist der Innenabstand eines Elements. Er liegt zwischen dem Inhalt und dem Rahmen. Dadurch bekommt der Inhalt mehr Platz und klebt nicht direkt am Rand.

1.box {
2    padding: 20px;
3}

Mit padding: 20px bekommt das Element auf allen vier Seiten einen Innenabstand von 20 px. Der Hintergrund des Elements reicht auch in den Padding-Bereich hinein.

Du kannst Padding auch für jede Seite einzeln festlegen:

1padding-top: 20px;
2padding-right: 10px;
3padding-bottom: 30px;
4padding-left: 15px;

Border (Rahmen)

Der Border ist der Rahmen eines Elements. Er liegt zwischen Padding und Margin. Ein Rahmen kann eine eigene Breite, Farbe und Linienart haben.

Kurzschreibweise

Meistens nutzt du die Kurzschreibweise border. Sie besteht aus Breite, Linienart und Farbe.

1.box {
2    border: 3px solid royalblue;
3}

Einzelne Eigenschaften

Du kannst die Eigenschaften des Rahmens auch einzeln schreiben:

1border-width: 3px;
2border-style: solid;
3border-color: royalblue;

Häufige Werte für border-style sind solid, dashed, dotted und double.

Rahmen pro Seite

Du kannst auch jeder Seite einen eigenen Rahmen geben:

1border-top: 2px dashed red;
2border-right: 4px dotted green;
3border-bottom: 1px solid black;
4border-left: 5px double orange;

Margin (Außenabstand)

Margin ist der Außenabstand eines Elements. Er liegt außerhalb des Rahmens und erzeugt Abstand zu anderen Elementen.

1.box {
2    margin: 30px;
3}

Mit margin: 30px bekommt das Element auf allen vier Seiten einen Außenabstand von 30 px. Margin gehört nicht zum Hintergrund des Elements.

Auch Margin kannst du für einzelne Seiten festlegen:

1margin-top: 20px;
2margin-right: 10px;
3margin-bottom: 40px;
4margin-left: 15px;