CSS Abstände und Boxmodell

Das CSS Box-Modell einfach erklärt
In CSS wird jedes HTML-Element als eine Rechteck-Box behandelt – egal ob ein Button, ein Absatz oder ein Bild. Deshalb nennt man das Ganze Box-Modell (englisch: Box Model). Stell dir vor, jedes Element auf deiner Webseite ist wie ein Paket – mit Inhalt, Polsterung, Kartonwand und etwas Abstand zum nächsten Paket.

Aufbau des Box-Modells
Ein Element besteht im Box-Modell aus vier Bereichen – von innen nach außen:

  • Content (Inhalt): Der eigentliche Inhalt, z. B. Text oder Bild.
  • Padding (Innenabstand): Der Abstand zwischen Inhalt und Rand der Box. Padding macht die Box „von innen größer“, ohne den Rand zu verändern.
  • Border (Rahmen): Eine sichtbare Linie um die Box – kann z. B. ein Rahmen um einen Button sein.
  • Margin (Außenabstand):Der Abstand zur nächsten Box – sorgt dafür, dass sich Elemente nicht berühren.
/* Eine Beispiel-Box mit Farben zur Veranschaulichung */
.box {
  background-color: lightblue;      /* Inhalt sichtbar machen */
  padding: 20px;                    /* Innenabstand */
  border: 5px solid darkblue;       /* Rahmen */
  margin: 30px;                     /* Abstand zu anderen Elementen */
}

Was bewirken die Werte?
Angenommen, du hast diese .box mit folgendem Inhalt: 

<div class="box">Hallo Welt!</div>

Dann ergibt sich folgender Aufbau:

  • Inhalt: Der Text „Hallo Welt!“
  • Padding: 20 px Abstand rund um den Text
  • Border: 5 px dicker blauer Rahmen
  • Margin: 30 px freier Platz zur nächsten Box

Wenn man die tatsächliche Breite der Box berechnet (z. B. bei einer width: 200px), kommt noch Padding und Border hinzu – es wird also größer als 200px!
200px (Inhalt) = + 20px + 20px (Padding links + rechts) + 5px + 5px (Border links + rechts) = 250px Gesamtbreite

Lösung: box-sizing: border-box Dann bleibt die Box exakt 200px breit, weil Padding und Border mit eingerechnet werden. 

.box {
  width: 200px;
  padding: 20px;
  border: 5px solid;
  box-sizing: border-box;
}

Beispiel der Boxen

Im folgenden Beispiel siehst du zwei fast gleich aussehende Boxen. Beide haben:
eine feste Hintergrundfarbe (hellblau), padding: 20px (Innenabstand), border: 5px (Rahmen), und margin: 30px (Abstand nach außen). 

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <title>Box</title>
  <style>
  
body {
  background-color: lightgray;     /* Für besseren Kontrast */
}

  
  
.box {
  width: 200px;
  background-color: lightblue;      /* Inhalt sichtbar machen */
  padding: 20px;                    /* Innenabstand */
  border: 5px solid darkblue;       /* Rahmen */
  margin: 30px;                     /* Abstand zu anderen Elementen */
}

.box2 {
  width: 200px;
  background-color: lightblue;     /* Inhalt */
  padding: 20px;
  border: 5px solid blue;
  margin: 30px;
  box-sizing: border-box;
}


  </style>
</head>
<body>

<div class="box">Hallo Welt!</div>

<div class="box2">Hallo Welt!</div>

</body>
</html>
Beispiel bc007