Das Box-Modell

Für CSS ist jedes Element ein Rechteck, auch wenn man es ihm nicht ansieht. Aus diesen Rechtecken besteht jede Seite. Wer ihren Aufbau versteht, kann Abstände gezielt setzen und viele Layoutfehler sofort erklären.

Was du am Ende kannst

• die vier Schichten einer Box benennen und in den DevTools finden
• Innenabstand, Rahmen und Außenabstand setzen
• die Kurzschreibweisen für Abstände lesen und schreiben
• die Breite einer Box ausrechnen und mit box-sizing vereinfachen
• Blöcke zentrieren und in der Breite begrenzen

Live-Coding zum Mitmachen

⤓ demo-08-box-modell.zip herunterladen

Der Ordner starter ist der Ausgangsstand, fertig der Stand nach dem Live-Coding.

Enthält: bilder/laufstrecke.svg, fest.html, index.html, kontakt.html, stil.css, termine.html

Vier Schichten

Jede Box besteht von innen nach außen aus vier Schichten:

┌───────────── margin ─────────────┐   Außenabstand, durchsichtig
│  ┌────────── border ──────────┐  │   Rahmen
│  │  ┌─────── padding ──────┐  │  │   Innenabstand
│  │  │       content        │  │  │   Inhalt
│  │  └──────────────────────┘  │  │
│  └────────────────────────────┘  │
└──────────────────────────────────┘

Am besten siehst du das direkt in den DevTools: Fährst du im Elements-Tab über ein Element, färbt der Browser die Schichten ein. Der Bereich Computed zeigt die Werte als Diagramm. Wir gehen die Schichten jetzt von innen nach außen durch.

Der Inhalt

Innen liegt der Inhalt: Text, ein Bild oder weitere Boxen. Wie breit er ist, hängt vom Elementtyp ab. Ein Block-Element nimmt die volle verfügbare Breite ein und wird so hoch wie nötig. Du änderst das mit width und height. Dazu kommen wir gleich.

padding: Der Innenabstand

padding schafft Platz zwischen dem Inhalt und dem Rand der Box. Die Hintergrundfarbe reicht bis in diesen Bereich hinein.

Ohne und mit Innenabstand

.box {
  margin-bottom: 0.5rem;
  background: #ccfbf1;
}

.mit-padding {
  padding: 1rem;
}

<div class="box">Ohne padding: Der Text stößt an den Rand der Fläche.</div>
<div class="box mit-padding">Mit padding: 1rem. Die Hintergrundfarbe reicht bis an die Außenkante.</div>

border: Der Rahmen

border zieht eine Linie um das padding. Die Kurzform nennt drei Werte: Breite, Stil und Farbe.

Verschiedene Rahmen

.box {
  margin-bottom: 0.5rem;
  padding: 0.5rem;
}

.a { border: 2px solid teal; }
.b { border: 4px dashed purple; }
.c { border-bottom: 3px solid teal; }

<div class="box a">border: 2px solid teal</div>
<div class="box b">border: 4px dashed purple</div>
<div class="box c">border-bottom: 3px solid teal</div>

Einzelne Seiten sprichst du mit border-top, border-right, border-bottom und border-left an.

margin: Der Außenabstand

margin schafft Abstand zu den Nachbarn. Er ist durchsichtig, denn er gehört nicht mehr zur sichtbaren Box.

Der Außenabstand schiebt die Nachbarn weg

.flaeche {
  padding: 1px;
  background: #fde68a;
}

.box {
  padding: 0.5rem;
  background: #ccfbf1;
}

.mit-margin {
  margin: 1rem 2rem;
}

<div class="flaeche">
  <div class="box">Ohne margin</div>
  <div class="box mit-margin">margin: 1rem 2rem. Der Außenabstand ist durchsichtig, die Fläche dahinter bleibt sichtbar.</div>
  <div class="box">Ohne margin</div>
</div>

Als Faustregel gilt: padding ist der Abstand innerhalb, margin der Abstand zwischen Boxen.

Die Kurzschreibweise

margin und padding nehmen ein bis vier Werte. Bei vier Werten läuft die Reihenfolge im Uhrzeigersinn von oben:

Schreibweise	Oben	Rechts	Unten	Links
margin: 1rem	1rem	1rem	1rem	1rem
margin: 1rem 2rem	1rem	2rem	1rem	2rem
margin: 1rem 2rem 3rem	1rem	2rem	3rem	2rem
margin: 1rem 2rem 3rem 4rem	1rem	2rem	3rem	4rem

Einzelne Seiten gehen mit margin-top und so weiter. Moderne Stylesheets verwenden oft zwei weitere Formen: margin-block für oben und unten, margin-inline für links und rechts.

Die Breite ausrechnen

Jetzt setzen wir die Teile zusammen. Wie breit ist diese Box auf dem Bildschirm?

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

Normal meint width nur den Inhalt, Innenabstand und Rahmen kommen auf beiden Seiten dazu:

5 + 20 + 300 + 20 + 5 = 350 Pixel

Das ist unpraktisch: Wer eine Box mit width: 100% und padding versieht, bekommt eine Box, die breiter ist als ihr Platz.

box-sizing: border-box

Mit box-sizing: border-box meint width die ganze Box bis einschließlich Rahmen. Der Inhalt passt sich an.

Beide Boxen haben width: 16rem

.aussen { background: #fde68a; padding: 1px; }
.box {
  width: 16rem;
  margin: 1rem;
  padding: 1rem;
  border: 0.5rem solid #0f766e;
  background: #ccfbf1;
}
.rand { box-sizing: border-box; }

<div class="aussen">
  <div class="box">content-box: ragt breiter als 16rem</div>
  <div class="box rand">border-box: genau 16rem breit</div>
</div>

Das entspricht dem, was man üblicherweise meint. Deshalb beginnt fast jedes moderne Stylesheet so:

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

Von hier an verwenden wir das in allen Beispielen.

Blöcke zentrieren und begrenzen

Text über die volle Breite eines großen Monitors ist schwer zu lesen. Zwei Eigenschaften lösen das:

• max-width begrenzt die Breite nach oben. Anders als width lässt es den Block auf kleinen Bildschirmen schrumpfen.
• margin-inline: auto verteilt den freien Platz gleichmäßig nach links und rechts.

Begrenzt und mittig

.inhalt {
  max-width: 20rem;
  margin-inline: auto;
  padding: 0.5rem;
  background: #ccfbf1;
}

<div class="inhalt">Maximal 20rem breit und waagerecht mittig. Verkleinere das Fenster: Der Block wird einfach schmaler.</div>

Wenn Außenabstände zusammenstoßen

Eine Besonderheit überrascht viele: Vertikale margin von untereinander liegenden Blöcken addieren sich nicht. Es zählt nur der größere Wert. Man nennt das Margin Collapsing.

2rem, nicht 3rem

.a, .b { padding: 0.25rem; background: #ccfbf1; }
.a { margin-bottom: 2rem; }
.b { margin-top: 1rem; }

<div class="a">margin-bottom: 2rem</div>
<div class="b">margin-top: 1rem. Der Abstand ist 2rem, nicht 3rem.</div>

Innerhalb von Flexbox und Grid (Tag 3) gibt es diesen Effekt nicht.

Größen und Überlauf

Eigenschaft	Wirkung
width, height	feste Größe. Feste Höhen besser vermeiden, denn der Inhalt kann überlaufen
min-width, min-height	Mindestgröße, darf wachsen
max-width, max-height	Obergrenze, darf schrumpfen
overflow	was bei Überlauf geschieht: visible, hidden, auto

Live-Coding: Die Website bekommt Luft

Wir gehen die Vereinsseite von außen nach innen durch:

1. box-sizing für alle Elemente setzen und den Standard-Außenabstand am body entfernen.
2. Kopf, Hauptinhalt und Fuß begrenzen und zentrieren.
3. Bilder an die verfügbare Breite anpassen.
4. Abschnitte mit padding, border und margin absetzen.
5. Tabellen und Formularfelder einstellen.

stil.css

/* Das Box-Modell: Breite meint die ganze Box, das macht das Rechnen einfach */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
}

/* Mittig mit begrenzter Breite: jeder Bereich hat denselben Rand */
header,
main,
footer {
  max-width: 60rem;
  margin-inline: auto;
  padding: 1rem 1.5rem;
}

/* Bilder passen sich an, statt das Layout zu sprengen */
img {
  display: block;
  max-width: 100%;
  height: auto;
}

figure {
  margin: 1.5rem 0;
}

section {
  margin-top: 2rem;
  padding: 1rem 1.5rem;
  border: 1px solid #c9d3d1;
}

/* Tabellen */
table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid #c9d3d1;
  text-align: left;
}

/* Formularfelder: volle Breite bis zu einer Grenze */
input:not([type="radio"], [type="checkbox"]),
select,
textarea {
  width: 100%;
  max-width: 30rem;
  padding: 0.5rem;
}

Übung

Starter für die Übung

⤓ uebung-08-box-modell.zip herunterladen

ZIP-Datei entpacken und den Ordner in VS Code öffnen (Datei → Ordner öffnen).

Enthält: bilder/laufstrecke.svg, boxen.css, boxen.html, fest.html, index.html, kontakt.html, stil.css, termine.html

Öffne boxen.html. Die Boxen ragen aus dem hellen Behälter heraus.

Stufe 1: Rechnen und reparieren

Rechne zuerst aus, wie breit eine Box tatsächlich ist, und prüfe es in den DevTools. Behebe das Problem mit einer einzigen Regel.

Stufe 2: Abstand

Die Boxen sollen 1rem Abstand voneinander haben, aber nicht über der ersten oder unter der letzten Box. Tipp: .box + .box.

Stufe 3: Behälter

Der Behälter bekommt Innenabstand, steht mittig auf der Seite und schrumpft bei kleinen Fenstern mit.

Für Schnelle

Im Inneren der Boxen stehen oben und unten unnötige Abstände von h2 und p. Finde sie mit den DevTools und entferne sie gezielt.