Box Model, Spacings & weitere Maßeinheiten

Jedes Element ist eine Box

• content: Inhalt (Text, Bild, …)
• padding: Innenabstand - zwischen Inhalt und Rahmen
• border: Rahmen/Umrandung
• margin: Außenabstand - zwischen Element und Nachbar-Elementen

Display: block, inline, inline-block

Jedes Element hat einen Standard-display-Wert. Er bestimmt, wie das Element im Layout aussieht, schon bevor ihr irgendein CSS schreibt:

a   { display: inline; }   /* Standard für <a>, <span>, <strong>, ... */
div { display: block;  }   /* Standard für <div>, <p>, <h1>–<h6>, <section>, ... */

	block	inline	inline-block
Beginnt eine neue Zeile	✅ ja	❌ nein - fließt im Text	❌ nein - fließt im Text
width / height wirken	✅ ja	❌ nein - wird ignoriert	✅ ja
Vertikales margin/padding wirkt	✅ ja	❌ nein - kollidiert mit Nachbarzeilen	✅ ja
Beispiel-Tags	div, p, h1, section	span, a, strong, em	img, button, input

Hinweis

Das erklärt zwei Dinge, die euch später noch begegnen:

• Warum margin: 0 auto zum Zentrieren eine feste width braucht: width wirkt nur bei block (oder inline-block).
• Warum ein <span> nie “ausbricht”, egal wie viel Text drin steht: inline-Elemente sind nur so breit wie ihr Inhalt und ignorieren width.

inline-block ist ein Mittelweg: Es fließt wie inline im Text, verhält sich aber bei width/height/margin wie block. Praktisch zum Beispiel für Badges, die neben Text stehen sollen, aber eine feste Größe brauchen:

.badge {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 999px;
}

Padding: Innenabstand

.card {
  padding: 20px;              /* alle 4 Seiten gleich */
}

.card-2 {
  padding: 10px 20px;         /* oben/unten: 10px, links/rechts: 20px */
}

.card-3 {
  padding: 10px 20px 15px 20px; /* oben rechts unten links (im Uhrzeigersinn) */
}

.card-4 {
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 15px;
  padding-left: 20px;         /* einzeln, wenn nötig */
}

Merkhilfe für die Kurzschreibweise

T-R-B-L = Top Right Bottom Left, im Uhrzeigersinn ab oben.

Margin: Außenabstand

Gleiche Syntax wie padding, aber wirkt außerhalb des Elements:

.card {
  margin: 16px;              /* Abstand zu allen Nachbarn */
  margin-bottom: 32px;       /* größerer Abstand nur nach unten */
}

Zentrieren mit margin: 0 auto

.container {
  width: 800px;
  margin: 0 auto; /* oben/unten: 0, links/rechts: automatisch verteilt */
}

Hinweis

Das funktioniert nur, wenn das Element eine feste Breite hat (width). Ein Klassiker, um einen Container horizontal zu zentrieren - auch ohne Flexbox!

Border

.card {
  border: 1px solid #d1d5db;         /* Breite | Stil | Farbe */
  border-radius: 8px;                /* abgerundete Ecken */
}

.card-dashed {
  border: 2px dashed tomato;
}

.card-bottom-only {
  border-bottom: 3px solid #2563eb;  /* nur eine Seite */
}

• Stile: solid, dashed, dotted, none
• border-radius macht auch Kreise: border-radius: 50%

Schatten: box-shadow

.card {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  /* x-Versatz | y-Versatz | Weichzeichnung | Farbe */
}

.card-inset {
  box-shadow: inset 0 1px 3px black; /* inset = Schatten INNEN statt außen */
}

Hinweis

Schatten sind seit ca. 2009 mit CSS trivial geworden. Seitdem ist ihre Popularität stark gesunken - Flat Design ohne Schatten und Rundungen ist heute oft die bevorzugte Ästhetik. Kennen solltet ihr box-shadow trotzdem, zum Beispiel für dezente Hover-Effekte (siehe Nesting-Abschnitt).

box-sizing: Ein häufiger Stolperstein!

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

Standardverhalten (content-box): width gilt nur für den Inhalt! → Tatsächliche Breite = 300 + 20 + 20 + 2 + 2 = 344px 😱

.box {
  box-sizing: border-box; /* padding & border werden EINGERECHNET */
}

→ Tatsächliche Breite bleibt 300px, padding/border gehen davon ab.

Praxis-Standard: global setzen!

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

Das packt ihr an den Anfang eures Stylesheets. Das erspart euch später sehr viel Kopfzerbrechen bei Layouts.

Praxisbeispiel: Eine Card gestalten

<article class="card">
  <h2>Webdevelopment 1</h2>
  <p>Ein Einführungskurs in HTML, CSS und die Grundlagen des Webs.</p>
  <button class="btn">Mehr erfahren</button>
</article>

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

.card {
  max-width: 320px;
  padding: 24px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background-color: white;
}

.card h2 { margin-bottom: 8px; font-size: 1.25rem; }
.card p  { margin-bottom: 16px; color: #4b5563; line-height: 1.5; }

.btn {
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  background-color: #2563eb;
  color: white;
  font-weight: 600;
}

Buttons stylen: native Defaults zurücksetzen

Browser bringen für <button> eigene Standard-Styles mit - je nach Betriebssystem unterschiedlich (grauer 3D-Rand, Systemschrift, …). Für ein einheitliches Design überschreibt man das meist komplett:

.btn {
  /* Native Defaults entfernen */
  border: none;
  font: inherit;       /* Schriftart/-größe vom umgebenden Text übernehmen statt Browser-Standard */
  cursor: pointer;     /* zeigt: hier kann geklickt werden */

  /* Eigenes Design */
  padding: 10px 20px;
  border-radius: 6px;
  background-color: #2563eb;
  color: white;
  font-weight: 600;
}

• font: inherit übernimmt alle Font-Eigenschaften (Familie, Größe, Gewicht, …) vom Elternelement. Buttons/Inputs bekommen sonst eine eigene System-Schriftart
• cursor: pointer sorgt für den Zeigefinger-Mauszeiger. Bei <button> ist das eigentlich schon Standard, aber wichtig, sobald ihr klickbare <div>s oder <a>s wie Buttons aussehen lasst

Achtung

Buttons sind von Haus aus fokussierbar (Tab-Taste). Verlasst euch beim Entfernen der Umrandung nicht nur auf border: none, sondern behaltet einen sichtbaren :focus-Zustand (siehe :focus-Abschnitt im Selektoren-Kapitel).

Bilder sinnvoll skalieren

Ein <img> bringt von Haus aus seine eigene Pixelgröße mit. Die passt selten exakt ins Layout:

img {
  max-width: 100%;   /* nie breiter als der Container */
  height: auto;       /* Seitenverhältnis bleibt erhalten */
}

Hinweis

Ohne das kann ein großes Bild seinen Container sprengen und horizontales Scrollen erzwingen. max-width: 100% + height: auto ist so grundlegend, dass es in fast jedem CSS-Reset steht.

Bild exakt zuschneiden: object-fit

Manchmal soll ein Bild eine feste Größe haben (z.B. ein quadratisches Profilbild), ohne verzerrt zu werden:

.avatar {
  width: 80px;
  height: 80px;
  object-fit: cover;    /* füllt die Box, schneidet Überstehendes ab */
  border-radius: 50%;
}

Wert	Verhalten
fill (Standard)	Bild wird verzerrt, um die Box exakt zu füllen
cover	Bild füllt die Box komplett, Seitenverhältnis bleibt - Ränder werden abgeschnitten
contain	Ganzes Bild bleibt sichtbar, ggf. mit Rand - Seitenverhältnis bleibt

Tipp

object-fit funktioniert vom Prinzip her wie background-size: cover aus dem Farben-Kapitel - nur für echte <img>-Tags statt Hintergrundbilder.

Listen stylen: list-style

<ul>/<ol> bringen von Haus aus Aufzählungszeichen und einen Innenabstand mit:

ul {
  list-style: none;   /* Punkte/Nummern entfernen */
  padding-left: 0;    /* Standard-Einrückung entfernen */
  margin: 0;
}

Tipp

Sehr häufig für Navigationen: eine <ul> ohne sichtbare Listenpunkte, deren <li>-Elemente per display: inline-block (oder später Flexbox) nebeneinander statt untereinander stehen.

nav ul {
  list-style: none;
  padding-left: 0;
}

nav li {
  display: inline-block;
  margin-right: 16px;
}

overflow: wenn Inhalt nicht in die Box passt

Ist der Inhalt einer Box größer als ihre width/height, bestimmt overflow, was passiert:

.box {
  width: 200px;
  height: 100px;
  overflow: auto;   /* Scrollbalken nur wenn nötig */
}

Wert	Verhalten
visible (Standard)	Inhalt läuft sichtbar über die Box hinaus
hidden	Überstehender Inhalt wird abgeschnitten, unsichtbar
scroll	Immer Scrollbalken, auch wenn nicht nötig
auto	Scrollbalken nur wenn der Inhalt tatsächlich zu groß ist

Tipp

overflow: hidden wird oft zweckentfremdet, um abgerundete Ecken (border-radius) bei Kind-Elementen zu erzwingen - zum Beispiel bei einem Bild, das sonst über die Rundung hinausragen würde.

Weitere Maßeinheiten

Ihr kennt schon px, em und rem aus dem Fonts-Abschnitt. CSS hat noch mehr Einheiten, die in der Praxis nützlich sind:

.hero {
  height: 100vh;       /* 100% der Viewport-Höhe */
  width: 100vw;        /* 100% der Viewport-Breite */
}

.sidebar {
  width: 30%;           /* 30% der Breite des Eltern-Elements */
}

input {
  width: 20ch;           /* Breite von ca. 20 Zeichen "0" */
}

Einheit	Bezugspunkt
%	Prozent vom Eltern-Element
vw / vh	Hundertstel der Viewport-Breite/-Höhe
ch	Breite des Zeichens „0” in der aktuellen Schriftart
ex	Höhe des Kleinbuchstaben „x” im Eltern-Element

Tipp

vh/vw sind praktisch für Vollbild-Elemente - zum Beispiel ein Hero-Bereich, der genau den sichtbaren Bildschirm füllt: height: 100vh. ch eignet sich gut für Formularfelder, deren Breite sich an der erwarteten Zeichenanzahl orientieren soll, etwa ein PLZ-Feld.

Absolute Einheiten: für Bildschirme meist ungeeignet

CSS kennt auch physische Einheiten wie cm (Zentimeter) und in (Inch) - dazu noch viele mehr.

@media print {
  .page { width: 21cm; } /* A4-Breite */
}

Anders als px, %, vw/vh, em/rem/ch/ex sind das absolute, keine relativen Einheiten. Sinnvoll nutzbar sind sie eigentlich nur bei der Ausgabe auf Papier (@media print). Auf Bildschirmen bleibt man bei relativen Einheiten.