Ausführbare CSS-Docs: Box-Modell

Q: Was macht box-sizing: border-box?

Es sorgt dafür, dass width und height Padding und Rahmen einschließen. Eine Box mit width: 200px, padding: 20px und einem 5px-Rahmen ist dann genau 200px breit, und der Inhaltsbereich schrumpft auf 150px. Der Standard, content-box, rechnet Padding und Rahmen obendrauf und kommt auf 250px.

Q: Wie wird die Gesamtbreite eines Elements berechnet?

Mit dem Standard content-box: width + linkes und rechtes Padding + linker und rechter Rahmen. Mit border-box: nur width. Margin liegt in beiden Fällen außerhalb der Box, vergrößert also den Platz, den das Element einnimmt, aber nicht seine eigene Breite.

Q: Sollte ich box-sizing: border-box überall setzen?

Die meisten Projekte machen das, mit , ::before, *::after { box-sizing: border-box; } am Anfang des Stylesheets. Damit gehen Prozentbreiten und Padding so auf, wie man es erwartet, und Frameworks wie Bootstrap und Tailwind bringen denselben Reset mit.

Die vier Schichten jeder Box

Jedes Element auf einer Seite wird als Rechteck aus vier Schichten gezeichnet, von innen nach außen:

Inhalt: der Text, das Bild oder die Kindelemente, in der Größe bestimmt durch width und height.
Padding: Abstand innerhalb der Box, zwischen Inhalt und Rahmen. Hier ist der Hintergrund des Elements zu sehen.
Rahmen (border): die Linie um das Padding.
Margin: Abstand außerhalb des Rahmens, der andere Boxen wegschiebt. Immer transparent.

Im Beispiel hat jede Schicht ihre eigene Farbe: blauer Inhalt, grünes Padding, ein dunkler Rahmen und ein bernsteinfarbener Bereich um die Box, der das Margin ist (gezeichnet von einem Wrapper, weil ein Margin selbst transparent ist).

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Box model</title>
  <style>
    .margin-area {
      display: flow-root; /* keeps the margin inside the amber wrapper */
      background: #f59e0b;
      width: max-content;
    }
    .box {
      width: 160px;
      height: 60px;
      padding: 20px;
      border: 10px solid #111827;
      margin: 24px;
      /* blue over the content only, green over the padding */
      background: linear-gradient(#2563eb, #2563eb) content-box, #16a34a;
      color: white;
    }
  </style>
</head>
<body>
  <div class="margin-area">
    <div class="box">content</div>
  </div>
  <p id="out"></p>
  <script>
    const box = document.querySelector('.box');
    const s = getComputedStyle(box);
    document.getElementById('out').textContent =
      'content ' + s.width + ' + padding ' + s.paddingLeft + ' x 2 + border ' +
      s.borderLeftWidth + ' x 2 = ' + box.getBoundingClientRect().width + 'px wide';
  </script>
</body>
</html>

Die Zeile unter der Box misst der Browser: 160 + 20 + 20 + 10 + 10 = 220px. Das Margin kommt mit weiteren 24px auf jeder Seite dazu, liegt aber außerhalb der Box und gehört deshalb nicht zu den 220.

Breitenberechnung: content-box vs. border-box

Standardmäßig (box-sizing: content-box) setzt width nur den Inhalt. Padding und Rahmen kommen obendrauf, und die Box wird breiter als die Zahl, die du geschrieben hast. Mit box-sizing: border-box ist width die ganze Box, und der Inhalt schrumpft, um Platz für Padding und Rahmen zu machen.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>box-sizing</title>
  <style>
    .box {
      width: 200px;
      padding: 20px;
      border: 5px solid #111827;
      background: #e5e7eb;
      margin-bottom: 12px;
    }
    .content { box-sizing: content-box; }
    .border { box-sizing: border-box; background: #bfdbfe; }
  </style>
</head>
<body>
  <div class="box content">content-box</div>
  <div class="box border">border-box</div>
  <script>
    document.querySelectorAll('.box').forEach((el) => {
      el.textContent += ': ' + el.getBoundingClientRect().width + 'px wide';
    });
  </script>
</body>
</html>

	`content-box` (Standard)	`border-box`
`width` bedeutet	Den Inhalt	Inhalt + Padding + Rahmen
`width: 200px; padding: 20px; border: 5px`	250px breit	200px breit
Inhaltsbereich in diesem Fall	200px	150px
Margin	Außerhalb, zählt nicht mit	Außerhalb, zählt nicht mit

Der border-box-Reset

Weil border-box die Größen aufgehen lässt, beginnt fast jedes moderne Stylesheet mit dieser Regel:

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

Am meisten zählt das bei Prozentwerten. Zwei Spalten mit width: 50% und Padding passen unter content-box nicht in eine Zeile, weil jede 50% plus ihr Padding breit ist:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Columns</title>
  <style>
    .row { width: 400px; background: #e5e7eb; margin-bottom: 12px; }
    .col {
      display: inline-block;
      width: 50%;
      padding: 10px;
      border: 2px solid #2563eb;
      vertical-align: top;
    }
    .fixed .col { box-sizing: border-box; }
  </style>
</head>
<body>
  <div class="row"><!--
 --><div class="col">content-box</div><!--
 --><div class="col">wraps to a new line</div><!--
--></div>
  <div class="row fixed"><!--
 --><div class="col">border-box</div><!--
 --><div class="col">fits side by side</div><!--
--></div>
</body>
</html>

(Die HTML-Kommentare entfernen den Leerraum zwischen den inline-block-Spalten, der sonst ein paar Pixel hinzufügen würde.)

Das Box-Modell in den DevTools sehen

Jeder Browser zeichnet dir das Box-Modell auf. Rechtsklick auf ein Element, Untersuchen wählen und den Tab Berechnet öffnen (in Firefox Layout): Ein Diagramm zeigt die Größe des Inhalts in der Mitte, umgeben von den Werten für Padding, Rahmen und Margin. Wenn du im Elemente-Panel über ein Element fährst, wird die Seite außerdem eingefärbt: Inhalt blau, Padding grün, Margin orange.

Inline-Boxen folgen anderen Regeln

Das Box-Modell oben beschreibt Block-Boxen wie <div> und <p>. Inline-Elemente wie <span>, <a> und <strong> fließen innerhalb einer Textzeile und behandeln vertikalen Abstand anders:

Eigenschaft	An einem Inline-Element
`width`, `height`	Ignoriert
Horizontales Padding, Rahmen, Margin	Angewendet, schieben Nachbarn zur Seite
Vertikales Padding und Rahmen	Gezeichnet, schieben aber die Zeilen darüber und darunter nicht weg
Vertikales Margin	Ignoriert

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Inline box</title>
  <style>
    p { width: 320px; line-height: 1.5; }
    span {
      background: #bfdbfe;
      padding: 12px 6px;
      margin: 30px 0;
      border: 2px solid #2563eb;
    }
    .ib { display: inline-block; }
  </style>
</head>
<body>
  <p>Text before an <span>inline span</span> whose vertical padding overlaps the lines around it.</p>
  <p>Text before an <span class="ib">inline-block</span> that makes room for its padding and margin.</p>
</body>
</html>

display: inline-block gibt einem Element innerhalb einer Zeile das volle Box-Modell: Breite, Höhe, Padding und Margin nehmen alle Platz ein. Jede Schicht im Detail findest du unter CSS Padding und CSS Margin.

Häufige Fehler

Einer Box mit fester Breite Padding geben und sich wundern, warum sie wächst. Unter content-box werden Padding und Rahmen zu width addiert. Nimm border-box.
Erwarten, dass Margin die Hintergrundfarbe übernimmt. Margin ist immer transparent; für farbigen Abstand nimmst du Padding.
height oder vertikales Margin an einem Inline-Element setzen. Es passiert nichts; nimm display: inline-block oder block.
Rahmen in der Rechnung vergessen. Ein 1px-Rahmen an einem Element mit width: 100% macht es unter content-box 2px zu breit, was eine horizontale Scrollleiste verursachen kann.
Margin und Padding verwechseln. Kurz gesagt: Padding liegt innerhalb des Rahmens, Margin außerhalb. Die Seite Margin vs Padding stellt beide nebeneinander.

Häufig gestellte Fragen

Was ist das CSS Box-Modell?

Die Regel, dass jedes Element als rechteckige Box aus vier Schichten dargestellt wird: dem Inhalt, dem Padding darum, dem Rahmen um das Padding und dem Margin außerhalb des Rahmens. Breite, Höhe und Abstände in CSS werden alle auf diesen Schichten gesetzt.

Was macht box-sizing: border-box?

Es sorgt dafür, dass width und height Padding und Rahmen einschließen. Eine Box mit width: 200px, padding: 20px und einem 5px-Rahmen ist dann genau 200px breit, und der Inhaltsbereich schrumpft auf 150px. Der Standard, content-box, rechnet Padding und Rahmen obendrauf und kommt auf 250px.

Wie wird die Gesamtbreite eines Elements berechnet?

Mit dem Standard content-box: width + linkes und rechtes Padding + linker und rechter Rahmen. Mit border-box: nur width. Margin liegt in beiden Fällen außerhalb der Box, vergrößert also den Platz, den das Element einnimmt, aber nicht seine eigene Breite.

Gehört Margin zum Box-Modell?

Ja, es ist die äußerste Schicht, aber immer transparent und zählt nie zur eigenen Breite oder zum Hintergrund des Elements. Es schiebt nur benachbarte Boxen weg.

Sollte ich box-sizing: border-box überall setzen?

Die meisten Projekte machen das, mit *, *::before, *::after { box-sizing: border-box; } am Anfang des Stylesheets. Damit gehen Prozentbreiten und Padding so auf, wie man es erwartet, und Frameworks wie Bootstrap und Tailwind bringen denselben Reset mit.

Verwandte Konzepte