Das CSS-Box-Modell

Das Box Model beschreibt, wie Browser jedes HTML-Element als rechteckige Box behandeln und Größe, Abstände und Rahmen berechnen.

box-sizing:

🟦 content-box → „Breite gilt nur für den blauen Inhalt.“

🟥 border-box → „Breite gilt blaue, grünen und orangen Bereich.“

1. Aufbau einer Box

Jedes Element besteht (von innen nach außen) aus vier Bereichen:

2. {box-sizing} — Steuerung der Berechnung

Mit der CSS-Eigenschaft box-sizing kannst du festlegen, welcher Teil der Box von den Werten width und height umfasst ist.

3. Beispiel

div.content-box {
  box-sizing: content-box;  /* Standard */
  width: 200px;
  padding: 20px;
  border: 5px solid blue;
}

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

div.content-box {
  box-sizing: content-box;  /* Standard */
  width: 200px;
  padding: 20px;
  border: 5px solid blue;
}

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

4. Typische Praxis (empfohlener Reset)

Viele CSS-Frameworks und Projekte setzen global box-sizing: border-box, um konsistente Layouts zu gewährleisten:

/* global reset */
*, *::before, *::after {
  box-sizing: border-box;
}

/* global reset */
*, *::before, *::after {
  box-sizing: border-box;
}

Dadurch bleiben alle Boxen berechenbar und responsive-freundlicher.

5. Sonderfälle & Hinweise

6. Schnellreferenz