CSS Box Model

Content, Padding, Border, Margin, box-sizing sowie Breite und Höhe. Diese Seite ist als Lernunterlage, Nachschlagewerk und Prüfungsvorbereitung für die CAP-Ausbildung gedacht.

Lernziele

• das Box Model im Browser erklären
• Innen- und Außenabstände korrekt einsetzen
• box-sizing: border-box begründen

Erklärung

Jedes Element wird als Box berechnet. Der Inhalt liegt innen, darum kommt padding, dann border, außen margin. Ohne border-box addieren sich Padding und Border zur angegebenen Breite.

Die DevTools zeigen das Box Model visuell. Das ist oft der schnellste Weg, unerwartete Abstände zu verstehen.

Beispiele

* {
  box-sizing: border-box;
}

.card {
  width: 320px;
  padding: 24px;
  border: 1px solid #d1d5db;
  margin-bottom: 16px;
}

border-box sorgt dafür, dass die angegebene Breite Padding und Border enthält.

.stack > * + * {
  margin-top: 1rem;
}

Diese Regel erzeugt vertikale Abstände zwischen direkten Kindern.

Typische Fehler

• Margin und Padding verwechseln.
• Abstände mit leeren Elementen erzeugen.
• Breiten auf 100% setzen und zusätzlich Padding addieren, ohne border-box.

Best Practices

• Setze global box-sizing: border-box.
• Nutze Padding für Innenraum und Margin für Abstand zu anderen Elementen.
• Analysiere Abstände mit den DevTools statt zu raten.

Kleine Übung

Baue eine Karte mit Titel, Text und Button. Markiere anschließend in den DevTools Content, Padding, Border und Margin.

Zusammenfassung

CSS sollte Gestaltung systematisch lösen: klare Selektoren, wiederkehrende Werte, responsive Layouts und verständliche Zustände. Gute Stylesheets bleiben auch bei wachsenden Seiten wartbar.

Weiterführende Seiten

• Vorherige Seite: CSS Farben und Einheiten
• Nächste Seite: CSS Text und Typography
• Zur Übersicht
• CSS Farben und Einheiten
• Layout Grundlagen