EMZETT.
Login

Emzett Wiki

HTML + CSS: Das Box-Modell

Properties1
tagsprogrammiersprachen, html-css

5 Min. Lesezeit

Kurz: Jedes HTML-Element ist für CSS eine rechteckige Box. Das Box-Modell beschreibt ihre vier Schichten von innen nach außen:

Teil des Kurses HTML + CSS

Kapitel 17 von 27 im Kurs HTML + CSS (Abschnitt „CSS: Layout“). Mit Fortschritt, Quiz und Zertifikat auf der Lernseite.

Jedes HTML-Element ist für CSS eine rechteckige Box. Das Box-Modell beschreibt ihre vier Schichten von innen nach außen:

SchichtEigenschaftBedeutung
Inhalt (content)width, heightText, Bild
Innenabstand (padding)paddingLuft zwischen Inhalt und Rand
Rahmen (border)borderLinie um die Box
Außenabstand (margin)marginAbstand zu anderen Boxen
<style>
  .box {
    width: 200px;
    padding: 20px;
    border: 5px solid #1e3a8a;
    margin: 30px;
    background: #dbeafe;
  }
  .rahmen { outline: 1px dashed crimson; }   /* outline zeigt den Außenrand ohne Platz zu brauchen */
</style>
<div class="box rahmen">Ich bin eine Box mit Innenabstand, Rahmen und Außenabstand.</div>

Öffne die Entwicklerwerkzeuge (F12) und fahre über ein Element: Der Browser zeigt farbig die vier Schichten.

padding und margin

Die Kurzschreibweise nimmt 1 bis 4 Werte:

SchreibweiseBedeutung
margin: 10pxalle vier Seiten
margin: 10px 20pxoben/unten, links/rechts
margin: 10px 20px 30pxoben, links/rechts, unten
margin: 10px 20px 30px 40pxoben, rechts, unten, links (im Uhrzeigersinn)

Einzelne Seiten: margin-top, margin-right, margin-bottom, margin-left (ebenso bei padding). Moderner und sprachunabhängig: margin-inline, margin-block, padding-inline, padding-block.

<style>
  .a { background: #fef3c7; padding: 20px 40px; margin-bottom: 10px; }
  .b { background: #dcfce7; padding-inline: 10px; padding-block: 30px; margin: 0 auto; width: 60%; }
</style>
<div class="a">Padding: 20px oben/unten, 40px links/rechts</div>
<div class="b">Zentriert mit margin: 0 auto</div>

Zentrieren: Ein Block mit fester oder maximaler width wird mit margin: 0 auto horizontal zentriert.

Margin kollabiert

Vertikale Außenabstände benachbarter Blöcke verschmelzen zum größeren Wert (nicht zur Summe):

<style>
  p { background: #e0e7ff; margin: 30px 0; }
  .ohne p { margin: 0; }
</style>
<p>Absatz 1 (30px unten)</p>
<p>Absatz 2 (30px oben): Abstand dazwischen ist nur 30px, nicht 60px</p>

Um das zu vermeiden, nutzt man oft nur margin-bottom oder Flex/Grid mit gap.

border

<style>
  div { padding: 10px; margin: 8px 0; background: #f8fafc; }
  .a { border: 2px solid black; }
  .b { border: 3px dashed crimson; border-radius: 10px; }
  .c { border-left: 8px solid teal; border-bottom: 1px dotted gray; }
  .d { border: 4px double navy; border-radius: 50px 10px; }
  .e { border: 2px solid #94a3b8; border-radius: 999px; padding: 4px 16px; display: inline-block; }
</style>
<div class="a">solid</div><div class="b">dashed mit Rundung</div>
<div class="c">einzelne Seiten</div><div class="d">double und unterschiedliche Radien</div>
<span class="e">Pille mit border-radius: 999px</span>

Stile: solid, dashed, dotted, double, groove, ridge, none. Mit border-radius rundest du Ecken, bei 50 % eines Quadrats entsteht ein Kreis.

Die Größe: box-sizing

Standardmäßig bezieht sich width nur auf den Inhalt. Padding und Rahmen kommen oben drauf. Das führt zu unerwarteten Breiten:

<style>
  div { width: 200px; padding: 20px; border: 5px solid navy; margin-bottom: 8px; background: #dbeafe; }
  .normal { box-sizing: content-box; }   /* Gesamtbreite: 200 + 40 + 10 = 250px */
  .border { box-sizing: border-box; }    /* Gesamtbreite: 200px */
</style>
<div class="normal">content-box: 250px breit</div>
<div class="border">border-box: 200px breit</div>

Fast jedes Projekt beginnt deshalb mit:

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

width, height und Überlauf

EigenschaftBedeutung
width, heightfeste Größe (Blöcke: Breite standardmäßig 100 %)
min-width, max-widthGrenzen; max-width: 100% hält Bilder im Rahmen
min-heightMindesthöhe (besser als feste Höhe)
aspect-ratioSeitenverhältnis: 16 / 9
overflowwas bei zu viel Inhalt passiert: visible, hidden, auto, scroll
<style>
  .fenster { width: 220px; height: 70px; border: 2px solid #475569; margin: 6px 0; }
  .hidden { overflow: hidden; }
  .auto { overflow: auto; }
  img, svg.b { max-width: 100%; height: auto; }
  .video { aspect-ratio: 16 / 9; background: #0f172a; color: white; width: 220px; display: grid; place-items: center; }
</style>
<div class="fenster hidden">overflow: hidden. Der Text ist deutlich länger als das Fenster und wird einfach abgeschnitten.</div>
<div class="fenster auto">overflow: auto. Der Text ist deutlich länger als das Fenster, also erscheint eine Scrollleiste.</div>
<div class="video">16 / 9</div>

Schatten und Umrisse

<style>
  .k { padding: 16px; margin: 14px; border-radius: 12px; background: white; display: inline-block; }
  .s1 { box-shadow: 0 1px 3px rgb(0 0 0 / .3); }
  .s2 { box-shadow: 0 8px 24px rgb(0 0 0 / .25); }
  .s3 { box-shadow: inset 0 0 0 3px teal; }
  .s4 { box-shadow: 0 0 0 4px #bfdbfe, 0 0 0 8px #93c5fd; }
  body { background: #f1f5f9; }
</style>
<div class="k s1">leicht</div><div class="k s2">schwebend</div>
<div class="k s3">innen</div><div class="k s4">Ringe</div>

box-shadow: x y unschärfe ausbreitung farbe; mit inset nach innen. Schatten brauchen keinen Platz und beeinflussen das Layout nicht.

Inline, Block und Inline-Block

Elemente sind standardmäßig Block (div, p, h1: eigene Zeile, volle Breite) oder Inline (span, a, strong: im Textfluss). Bei Inline-Elementen wirken width, height und vertikale margin nicht. Mehr im nächsten Kapitel (display).

Merke

  • Box = Inhalt + Padding + Border + Margin
  • Setze box-sizing: border-box für alle Elemente
  • margin: 0 auto zentriert Blöcke mit begrenzter Breite
  • Vertikale Margins benachbarter Blöcke verschmelzen
  • max-width: 100%; height: auto macht Bilder flexibel; overflow steuert Überlauf
  • box-shadow und border-radius brauchen keinen Platz im Layout

Übungsaufgabe

Baue eine Karte mit 24 px Innenabstand, 1 px Rahmen, abgerundeten Ecken, leichtem Schatten und einer maximalen Breite von 360 px, zentriert auf der Seite.

Quiz zur Selbstkontrolle

Weiter im Kurs

Zurück: Text und Schriften

Weiter: display, position und Überlagerung

Alle Kapitel: HTML + CSS im Überblick

Graphansicht

Backlinks