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!

Stolperstein: Margin Collapsing

<p style="margin-bottom: 30px;">Erster Absatz</p>
<p style="margin-top: 20px;">Zweiter Absatz</p>

Man würde 50px Abstand erwarten (30px + 20px) - tatsächlich sind es aber nur 30px.

Hinweis

Vertikale margins zwischen zwei Nachbar-Elementen werden nicht addiert, sondern kollabieren zu einem einzigen Abstand: Es gewinnt der größere der beiden Werte. Das passiert nur bei vertikalen Margins zwischen block-Elementen im normalen Fluss - nicht bei padding, nicht horizontal, und nicht, sobald Flexbox/Grid im Spiel ist (siehe nächstes Kapitel).

Faustregel

Wenn ein Abstand nicht der erwarteten Summe entspricht: erst an Margin Collapsing denken, dann in den DevTools nachsehen (siehe Kaskade-Kapitel). In der Praxis löst man das oft, indem man Abstände nur in eine Richtung setzt (z.B. immer margin-bottom, nie zusätzlich margin-top).

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).

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.

Praxisbeispiel: ein Hero-Bereich

Mehrere der bisherigen Konzepte kommen hier zusammen: Viewport-Einheiten, relative Schriftgrößen, zentrierter Text und abgerundete Ecken.

<section class="hero">
  <h1>Willkommen!</h1>
  <p>
    Web Development (Webentwicklung) ist die Erstellung, Programmierung und
    Wartung von Websites und Webanwendungen, die in einem Browser laufen.
  </p>
  <button class="btn">Jetzt starten</button>
</section>

.hero {
  min-height: 100vh; /* füllt mindestens die ganze Bildschirmhöhe */
  padding: 24px;
  text-align: center; /* zentriert Überschrift und Button */
}

.hero h1 {
  font-size: 2.5rem; /* rem statt px: bleibt skalierbar */
}

.hero .btn {
  display: inline-block;
  padding: 12px 24px;
  border: none;
  border-radius: 999px; /* "Pill"-Form statt eckiger Ecken */
  background-color: #2563eb;
  color: white;
  font-weight: 600;
}

Tipp

vh/vw, rem, text-align: center und border-radius tauchen in der Praxis ständig gemeinsam auf - vor allem bei Hero-Bereichen, Cards und Buttons.

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.