Das CSS-Boxmodell verstehen: So entstehen Abstände, Größen und Layouts

·

Sladjan Lazic

Wer mit CSS arbeitet, begegnet früher oder später einem scheinbar rätselhaften Problem: Ein Element ist breiter als angegeben, zwei Abstände verhalten sich unterschiedlich oder eine Box ragt plötzlich über ihren Container hinaus. Häufig liegt die Ursache nicht in einer komplizierten Layout-Regel, sondern im CSS-Boxmodell. Das Boxmodell gehört zu den wichtigsten Grundlagen der Webentwicklung. Es beschreibt, wie Browser die Größe und den Platzbedarf von HTML-Elementen berechnen. Wer dieses Prinzip verstanden hat, kann Layouts zuverlässiger umsetzen, Abstände gezielter steuern und viele typische CSS-Fehler schneller beheben. In diesem Blogartikel erkläre ich das CSS-Boxmodell.

CSS-Boxmodell: Jedes HTML-Element ist eine Box

Aus Sicht des Browsers besteht eine Webseite aus rechteckigen Bereichen. Überschriften, Absätze, Bilder, Schaltflächen und ganze Seitenabschnitte werden intern als Boxen behandelt. Diese Boxen können nebeneinander, untereinander oder ineinander angeordnet sein.

Eine solche Box besitzt vier Bereiche:

  1. den eigentlichen Inhalt,
  2. den Innenabstand,
  3. den Rahmen,
  4. den Außenabstand.

Im CSS heißen diese Bestandteile content, padding, border und margin. Sie liegen schichtweise umeinander. Der Inhalt bildet den innersten Bereich. Darum befindet sich das Padding, anschließend folgt der Rahmen und außen liegt der Margin.

Ein einfaches Beispiel sieht so aus:

<div class="karte">
  Einführung in das CSS-Boxmodell
</div>
.karte {
  width: 300px;
  padding: 20px;
  border: 2px solid #333;
  margin: 30px;
}

Obwohl für die Karte eine Breite von 300px angegeben wurde, muss sie nicht zwangsläufig nur 300 Pixel breit erscheinen. Wie groß die Box tatsächlich wird, hängt vor allem von der Eigenschaft box-sizing ab.

Der Inhaltsbereich: content

Im Zentrum des Boxmodells befindet sich der Inhalt eines Elements. Das kann Text, ein Bild, ein Formularfeld oder ein weiteres HTML-Element sein.

Die CSS-Eigenschaften width und height beziehen sich standardmäßig auf diesen Inhaltsbereich:

.element {
  width: 300px;
  height: 150px;
}

Ohne weitere Angaben ist der Inhaltsbereich hier 300 Pixel breit und 150 Pixel hoch. Padding und Rahmen können die sichtbare Gesamtgröße zusätzlich vergrößern.

Bei vielen Elementen ist eine feste Höhe allerdings nicht erforderlich. Blockelemente passen ihre Höhe normalerweise automatisch an ihren Inhalt an. Das ist oft flexibler und verhindert, dass Text aus einer zu kleinen Box herausragt.

.artikel {
  width: 600px;
}

Die Höhe des Artikels ergibt sich in diesem Fall aus dem enthaltenen Text. Wird der Text länger, wächst die Box automatisch mit.

Der Innenabstand: padding

padding bezeichnet den Abstand zwischen dem Inhalt und dem Rahmen einer Box. Der Innenabstand gehört optisch zum Element. Deshalb wird die Hintergrundfarbe auch im Padding-Bereich dargestellt.

.hinweis {
  background-color: #eaf4ff;
  padding: 24px;
}

Der Text liegt nun nicht direkt am Rand der farbigen Fläche. Stattdessen entsteht rundherum ein Innenabstand von 24 Pixeln.

Für jede Seite können eigene Werte definiert werden:

.hinweis {
  padding-top: 16px;
  padding-right: 24px;
  padding-bottom: 16px;
  padding-left: 24px;
}

Dasselbe lässt sich kürzer schreiben:

.hinweis {
  padding: 16px 24px;
}

Der erste Wert gilt für oben und unten, der zweite für rechts und links.

Bei vier Angaben werden die Seiten im Uhrzeigersinn definiert:

.hinweis {
  padding: 10px 20px 30px 40px;
}

Das bedeutet konkret:

oben: 10px
rechts: 20px
unten: 30px
links: 40px

Padding eignet sich besonders dafür, Inhalte innerhalb einer Schaltfläche, Karte oder eines Formularfeldes auszurichten. Es sollte nicht mit Margin verwechselt werden: Padding schafft Platz innerhalb des Elements, Margin außerhalb.

Der Rahmen: border

Der Rahmen umschließt Inhalt und Padding. Er kann sichtbar gestaltet oder vollständig ausgeblendet werden.

.karte {
  border: 1px solid #d5d9df;
}

Eine vollständige Rahmendefinition enthält Breite, Stil und Farbe. Ohne einen Stil wie solid, dashed oder dotted wird der Rahmen in der Regel nicht angezeigt.

Auch einzelne Seiten lassen sich separat gestalten:

.zitat {
  border-left: 4px solid #3478f6;
  padding-left: 20px;
}

Dieses Muster wird häufig für Zitate, Hinweise oder Statusmeldungen verwendet.

Die Stärke des Rahmens beeinflusst die Größe einer Box. Ein Rahmen von zwei Pixeln wird sowohl links als auch rechts beziehungsweise oben und unten berücksichtigt. Bei der klassischen Größenberechnung kommen diese Werte zur angegebenen Breite und Höhe hinzu.

Abgerundete Ecken werden mit border-radius erzeugt:

.karte {
  border: 1px solid #ddd;
  border-radius: 12px;
}

border-radius verändert nicht die berechnete Größe der Box. Die Eigenschaft beeinflusst lediglich deren Darstellung.

Der Außenabstand: margin

Mit margin wird der Abstand außerhalb eines Elements festgelegt. Er trennt die Box von benachbarten Elementen.

.abschnitt {
  margin-bottom: 40px;
}

Anders als Padding übernimmt Margin nicht die Hintergrundfarbe des Elements. Der Außenabstand bleibt transparent und zeigt den Hintergrund des übergeordneten Bereichs.

Auch Margin unterstützt Kurzschreibweisen:

.element {
  margin: 20px;
}
.element {
  margin: 20px 40px;
}
.element {
  margin: 10px 20px 30px 40px;
}

Eine häufig verwendete Technik ist das horizontale Zentrieren eines Blockelements:

.container {
  width: 800px;
  margin-left: auto;
  margin-right: auto;
}

Das ist die Kurz-Schreibweise:

.container {
  width: 800px;
  margin: 0 auto;
}

Das funktioniert, wenn das Element eine definierte Breite oder eine maximale Breite besitzt und im verfügbaren Raum links und rechts Platz übrig bleibt. Für moderne, responsive Layouts ist meistens max-width geeigneter als eine starre Breite:

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

Der Container kann dadurch auf kleinen Bildschirmen schrumpfen, wird auf großen Displays aber nicht breiter als 1200 Pixel.

Warum eine Box größer als erwartet werden kann

Standardmäßig verwenden Browser für viele Elemente folgende Einstellung:

box-sizing: content-box;

Bei content-box bestimmen width und height ausschließlich die Größe des Inhalts. Padding und Rahmen werden anschließend addiert.

Angenommen, ein Element besitzt diese Regeln:

.box {
  width: 300px;
  padding: 20px;
  border: 5px solid black;
}

Die tatsächliche Breite berechnet sich wie folgt:

300px Inhalt
+ 40px horizontales Padding
+ 10px horizontaler Rahmen
= 350px Gesamtbreite

Der Außenabstand ist nicht Bestandteil der Boxbreite, beeinflusst aber den insgesamt beanspruchten Platz im Layout.

Wenn zusätzlich margin: 15px verwendet wird, beträgt der horizontale Platzbedarf einschließlich Außenabständen 380 Pixel:

350px Boxbreite
+ 15px linker Margin
+ 15px rechter Margin
= 380px Platzbedarf

Diese Berechnung ist eine der häufigsten Ursachen für überlaufende Container und unerwartete Zeilenumbrüche.

border-box: Die praktischere Größenberechnung

Viele Entwickler verwenden deshalb global border-box:

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

Bei dieser Einstellung sind Padding und Rahmen bereits in der angegebenen Breite und Höhe enthalten.

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

Die sichtbare Box bleibt nun insgesamt 300 Pixel breit. Für den Inhalt steht entsprechend weniger Platz zur Verfügung:

300px Gesamtbreite
- 40px horizontales Padding
- 10px horizontaler Rahmen
= 250px Inhaltsbreite

Diese Berechnungsweise ist für moderne Layouts meist intuitiver. Eine Box mit width: 100% bleibt auch dann innerhalb ihres Containers, wenn sie Padding und einen Rahmen besitzt.

Ohne border-box kann das folgende Element über seinen Elternbereich hinausragen:

.eingabefeld {
  width: 100%;
  padding: 12px;
  border: 1px solid #999;
}

Mit box-sizing: border-box werden Innenabstand und Rahmen in die Breite von 100 Prozent eingerechnet.

Breite ist nicht immer gleich sichtbare Breite

Die tatsächlich dargestellte Größe eines Elements hängt nicht nur von width ab. Auch min-width, max-width, Inhalt, Layoutmodus und Eigenschaften des Elternelements spielen eine Rolle.

.artikelbild {
  width: 100%;
  max-width: 700px;
}

Das Bild darf bis zu 700 Pixel breit werden, passt sich auf kleineren Bildschirmen aber an den verfügbaren Platz an.

Ähnlich funktionieren Mindest- und Maximalhöhen:

.karte {
  min-height: 200px;
}

Die Karte ist mindestens 200 Pixel hoch, kann bei mehr Inhalt jedoch weiter wachsen.

Problematisch kann eine feste Höhe werden:

.karte {
  height: 200px;
}

Enthält die Karte mehr Text, als in diesen Bereich passt, kann der Inhalt überlaufen. Wie damit umgegangen wird, lässt sich mit overflow steuern:

.karte {
  height: 200px;
  overflow: auto;
}

Der Browser blendet bei Bedarf Scrollleisten ein. Für normale Inhaltsbereiche ist eine automatische Höhe dennoch oft die bessere Lösung.

Margin Collapsing: Wenn Außenabstände zusammenfallen

Eine Besonderheit des Boxmodells ist das sogenannte Margin Collapsing. Vertikale Außenabstände bestimmter Blockelemente werden nicht immer addiert. Stattdessen können sie zu einem gemeinsamen Abstand zusammenfallen.

.erster-absatz {
  margin-bottom: 30px;
}

.zweiter-absatz {
  margin-top: 20px;
}

Zwischen den beiden Absätzen entstehen in einer typischen Blockanordnung nicht 50, sondern 30 Pixel Abstand. In der Regel setzt sich der größere der beiden Werte durch.

Dieses Verhalten betrifft hauptsächlich vertikale Margins normaler Blockelemente. Horizontale Abstände fallen nicht auf diese Weise zusammen. Bei Flexbox- und Grid-Elementen tritt Margin Collapsing zwischen den direkten Kindern ebenfalls nicht auf.

Auch der obere Margin eines Kindelements kann unter bestimmten Bedingungen mit dem Margin seines Elternbereichs zusammenfallen. Dadurch scheint sich nicht das Kind innerhalb des Containers zu bewegen, sondern der gesamte Container nach unten.

Ein möglicher Ausweg besteht darin, dem Elternbereich Padding oder einen Rahmen zu geben. Häufig ist es jedoch klarer, den Abstand direkt am Container zu definieren oder ein modernes Layout mit gap zu verwenden.

Abstände in Flexbox und Grid

Bei Flexbox- und Grid-Layouts werden Abstände zwischen Elementen idealerweise häufig mit gap statt mit individuellen Margins festgelegt.

.kartenliste {
  display: flex;
  gap: 24px;
}

Oder mit CSS Grid:

.kartenliste {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

gap beschreibt den Abstand zwischen den Elementen, fügt aber keinen zusätzlichen Abstand an den äußeren Rändern des Containers hinzu. Das macht Layouts oft leichter nachvollziehbar.

Bei einer klassischen Lösung mit Margin muss dagegen häufig der Abstand des letzten Elements entfernt werden:

.karte {
  margin-right: 24px;
}

.karte:last-child {
  margin-right: 0;
}

Mit gap entfällt diese Sonderbehandlung. Margin bleibt weiterhin sinnvoll, beispielsweise für den Abstand zwischen größeren Seitenabschnitten. Innerhalb klar definierter Flex- und Grid-Strukturen ist gap jedoch meistens die übersichtlichere Wahl.

CSS-Boxmodell

Block-, Inline- und Inline-Block-Elemente

Wie das Boxmodell wirkt, hängt auch von der Darstellungsart eines Elements ab. Diese wird mit display gesteuert.

Blockelemente wie <div>, <section> und <p> beginnen normalerweise in einer neuen Zeile. Ohne definierte Breite füllen sie den verfügbaren horizontalen Raum aus.

.block {
  display: block;
}

Inline-Elemente wie <span> oder <a> bleiben dagegen im Textfluss. Bei ihnen verhalten sich Breiten- und Höhenangaben anders als bei Blockelementen. width und height haben auf gewöhnliche Inline-Elemente keine direkte Wirkung.

.markierung {
  display: inline;
  padding: 4px;
}

Horizontales Padding funktioniert dabei erwartungsgemäß. Vertikales Padding kann zwar sichtbar sein, verändert aber den Zeilenfluss nicht immer so, wie Einsteiger es vermuten.

Soll ein Element im Textfluss bleiben und gleichzeitig eine kontrollierbare Breite und Höhe besitzen, eignet sich inline-block: 

.badge {
  display: inline-block;
  min-width: 80px;
  padding: 6px 12px;
}

Flex- und Grid-Elemente folgen ebenfalls dem Boxmodell, verteilen den verfügbaren Platz aber nach zusätzlichen Regeln. Deshalb kann eine rechnerisch korrekte Box innerhalb eines Flex-Containers trotzdem kleiner werden. Standardmäßig dürfen Flexelemente nämlich schrumpfen.

Prozentwerte und ihre Tücken

Prozentuale Breiten beziehen sich normalerweise auf den verfügbaren Inhaltsbereich des übergeordneten Elements. 

.spalte {
  width: 50%;
}

Zwei solcher Spalten scheinen gemeinsam genau 100 Prozent zu ergeben. Mit content-box können Padding und Rahmen die Gesamtbreite jedoch vergrößern:

.spalte {
  width: 50%;
  padding: 20px;
}

Stehen zwei Spalten nebeneinander, passen sie möglicherweise nicht mehr in dieselbe Zeile. border-box verhindert dieses Problem in vielen Fällen.

Besonders aufmerksam sollte man bei Prozentwerten für vertikales Padding und Margin sein. Prozentuale Werte orientieren sich dabei traditionell an der Breite des umgebenden Blocks, nicht an dessen Höhe. Das kann zunächst überraschend wirken.

Für moderne Größenberechnungen stellt CSS außerdem Funktionen wie calc(), min(), max() und clamp() bereit:

.container {
  width: min(100% - 32px, 1200px);
  margin-inline: auto;
}

Der Container erhält an kleinen Bildschirmrändern insgesamt 32 Pixel Abstand und wächst gleichzeitig nie über 1200 Pixel hinaus.

Logische statt physische Eigenschaften

Klassische Eigenschaften wie margin-left und padding-right beziehen sich auf feste Seiten. Moderne CSS-Eigenschaften können sich stattdessen an der Schreibrichtung orientieren.

.element {
  margin-inline: auto;
  padding-block: 20px;
  padding-inline: 32px;
}

inline bezeichnet in einer üblichen links-nach-rechts verlaufenden Sprache die horizontale Richtung. block steht für die vertikale Richtung.

padding-inline definiert die Abstände am Anfang und Ende der Textzeile, während padding-block die Abstände oberhalb und unterhalb des Inhalts festlegt. Bei anderen Schreibrichtungen passt der Browser die Zuordnung automatisch an.

Das macht Komponenten wiederverwendbarer und erleichtert die Unterstützung mehrsprachiger Webseiten.

outline und box-shadow gehören nicht zur Größenberechnung

Neben dem Rahmen können Elemente eine Kontur oder einen Schatten besitzen. Beide verändern die berechnete Boxgröße nicht. 

.button:focus-visible {
  outline: 3px solid #5b8cff;
  outline-offset: 3px;
}

Ein outline wird außerhalb der Box gezeichnet, ohne benachbarte Elemente zu verschieben. Das ist besonders für sichtbare Fokusmarkierungen hilfreich.

Auch ein Schatten beansprucht keinen zusätzlichen Platz im Dokumentfluss: 

.karte {
  box-shadow: 0 8px 24px rgb(0 0 0 / 12%);
}

Der Schatten kann optisch über andere Bereiche reichen, hat aber keinen Einfluss darauf, wie der Browser die Position benachbarter Elemente berechnet.

Ein praxisnahes Beispiel: Eine responsive Karte

Das Zusammenspiel der verschiedenen Bereiche lässt sich gut anhand einer typischen Inhaltskarte zeigen:

<article class="produktkarte">
  <img
    class="produktkarte__bild"
    src="produkt.jpg"
    alt="Abgebildetes Produkt"
  >

  <div class="produktkarte__inhalt">
    <h2 class="produktkarte__titel">Produktname</h2>
    <p class="produktkarte__text">
      Eine kurze Beschreibung des Produkts und seiner wichtigsten Eigenschaften.
    </p>
    <a class="produktkarte__link" href="#">Mehr erfahren</a>
  </div>
</article>
*,
*::before,
*::after {
  box-sizing: border-box;
}

.produktkarte {
  width: 100%;
  max-width: 420px;
  overflow: hidden;
  background: #fff;
  border: 1px solid #e1e4e8;
  border-radius: 16px;
  box-shadow: 0 8px 30px rgb(0 0 0 / 8%);
}

.produktkarte__bild {
  display: block;
  width: 100%;
  height: auto;
}

.produktkarte__inhalt {
  padding: 24px;
}

.produktkarte__titel {
  margin: 0 0 12px;
}

.produktkarte__text {
  margin: 0 0 20px;
  line-height: 1.6;
}

.produktkarte__link {
  display: inline-block;
  padding: 10px 16px;
  color: #fff;
  text-decoration: none;
  background: #1769e0;
  border-radius: 8px;
}

In diesem Beispiel bleibt die Karte dank max-width flexibel. Der Innenabstand wird am Inhaltsbereich definiert, während das Bild bis an die Kartenränder reicht. Die Abstände zwischen Überschrift, Text und Link entstehen über gezielte Margins.

Durch die globale Verwendung von border-box bleibt die Gesamtbreite der Karte kontrollierbar. Der Rahmen wird in die angegebene Breite eingerechnet, und das Padding des Inhaltsbereichs führt nicht zu einem unerwarteten horizontalen Überlauf.

Das Boxmodell im Browser untersuchen

Moderne Browser zeigen das Boxmodell direkt in ihren Entwicklerwerkzeugen an. Dazu wird ein Element auf der Webseite mit der rechten Maustaste ausgewählt und anschließend „Untersuchen“ beziehungsweise „Element untersuchen“ geöffnet.

Im Bereich für berechnete CSS-Eigenschaften erscheint meist eine grafische Darstellung aus mehreren verschachtelten Rechtecken. Dort lassen sich Inhalt, Padding, Rahmen und Margin samt aktueller Pixelwerte ablesen.

Diese Ansicht ist besonders hilfreich, wenn ein Element unerwartet viel Platz beansprucht. Statt einzelne CSS-Regeln nur anhand des Quellcodes zu beurteilen, zeigt der Browser die tatsächlich berechneten Werte. Dabei können auch Regeln sichtbar werden, die aus einem Stylesheet, einer Komponentenbibliothek oder den Standardformatierungen des Browsers stammen.

Wichtig ist außerdem der Unterschied zwischen deklarierten und berechneten Werten. Eine Regel wie width: 50% enthält zunächst keinen festen Pixelwert. Erst anhand des umgebenden Elements kann der Browser daraus die tatsächliche Breite berechnen.

Häufige Fehler in der Praxis

Ein typischer Fehler entsteht, wenn ein Element width: 100% sowie zusätzlich Padding erhält und weiterhin content-box verwendet. Die Box wird dadurch breiter als ihr Container. Die globale Umstellung auf border-box löst diesen Fall meistens.

Auch voreingestellte Außenabstände führen regelmäßig zu Verwirrung. Browser versehen etwa Überschriften und Absätze standardmäßig mit Margins. Ein einfaches CSS-Reset kann für klarere Ausgangsbedingungen sorgen:

h1,
h2,
h3,
p {
  margin: 0;
}

Allerdings sollten Abstände anschließend bewusst neu definiert werden. Ein vollständiges Entfernen aller Standardwerte ohne Ersatz kann die Lesbarkeit verschlechtern.

Weitere Probleme entstehen durch feste Höhen, zu breite Inhalte, lange Wörter oder Bilder ohne maximale Breite. Eine robuste Grundregel für Medien lautet:

img,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

Damit werden Bilder und Videos nicht breiter als ihr verfügbarer Bereich.

Bei langen Zeichenketten kann zusätzlich ein kontrollierter Zeilenumbruch notwendig sein:

.text {
  overflow-wrap: anywhere;
}

Das ist beispielsweise bei langen URLs oder technischen Kennungen hilfreich.

Ein solides Grundgerüst für neue Projekte

Für viele Webseiten bietet sich eine kleine globale Basis an:

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

html {
  font-family: system-ui, sans-serif;
  line-height: 1.5;
}

body {
  margin: 0;
}

img,
svg,
video {
  display: block;
  max-width: 100%;
}

Damit wird die Größenberechnung vereinheitlicht, der voreingestellte Außenabstand des body entfernt und das Überlaufen großer Medien verhindert.

Dieses Grundgerüst ersetzt kein bewusstes Designsystem. Es schafft jedoch vorhersehbare Bedingungen, auf denen sich Komponenten und Layouts aufbauen lassen.

CSS-Boxmodell – Fazit

Das CSS-Boxmodell erklärt, wie viel Platz ein Element tatsächlich benötigt. Der Inhalt liegt im Zentrum, Padding schafft inneren Abstand, der Border bildet den Rahmen und Margin trennt das Element von seiner Umgebung. Besonders entscheidend ist die Eigenschaft box-sizing. Während content-box Padding und Rahmen zur angegebenen Breite addiert, hält border-box die gesamte sichtbare Box innerhalb dieser Vorgabe. Deshalb ist eine globale border-box-Regel heute in vielen Projekten Standard. Wer Abstände bewusst einsetzt, feste Höhen nur gezielt verwendet und das Boxmodell regelmäßig in den Entwicklerwerkzeugen überprüft, vermeidet einen großen Teil der typischen CSS-Layoutprobleme. Das Konzept ist zwar grundlegend, bleibt aber auch bei Flexbox, Grid und responsiven Komponenten von zentraler Bedeutung.

Sladjan Lazic
Latest posts by Sladjan Lazic (see all)

Das könnte dich auch interessieren

Comments

Schreiben Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert