Das Box-Modell in Praktischer Anwendung Verstehen

Jedes Element auf einer Webseite wird als rechteckige Box dargestellt. Jede Box besteht aus vier Teilen:

• Inhalt: der eigentliche Text oder die Elemente;
• Innenabstand (Padding): Abstand innerhalb des Elements;
• Rahmen (Border): umgibt den Inhalt und den Innenabstand;
• Außenabstand (Margin): Abstand außerhalb des Elements.

Visuelle Struktur

Außenabstand → Rahmen → Innenabstand → Inhalt. Die Gesamtgröße eines Elements hängt von all diesen Teilen ab.

Inhalt

Der sichtbare Teil des Elements: Text, Bilder oder andere Elemente.

Padding (Innenabstand)

Erzeugt Abstand zwischen Inhalt und Rahmen.

.box {
  padding: 20px;
}

Kurzschreibweise

padding: 20px; /* all sides */
padding: 10px 20px; /* top/bottom | left/right */
padding: 10px 20px 5px; /* top | left/right | bottom */
padding: 10px 15px 20px 25px; /* top | right | bottom | left */

Margin (Außenabstand)

Erzeugt Abstand zwischen Elementen.

.box {
  margin: 20px;
}

Kurzschreibweise

margin: 20px;
margin: 10px 20px;
margin: 10px 20px 5px;
margin: 10px 15px 20px 25px;

Rahmen

Definiert den Rand des Elements.

.box {
  border: 4px solid darkblue;
}

Wichtiger Unterschied

• Padding → Innenabstand (beeinflusst den Hintergrund);
• Margin → Außenabstand (beeinflusst den Hintergrund NICHT).

Box Sizing

Steuert, wie Breite und Höhe berechnet werden.

box-sizing: content-box; /* default */
box-sizing: border-box;

• content-box: padding + border werden zur Größe addiert;
• border-box: alles in der Größe enthalten.

In realen Projekten wird border-box bevorzugt.