CSS Box-Modell: Aufbau, Abmessungen & Eigenschaften

Das CSS-Box-Modell bildet das Fundament für das Layout und die Positionierung von HTML-Elementen auf Webseiten[cite: 9]. Jedes HTML-Element wird als rechteckige Box dargestellt[cite: 9].

Eine Elementbox setzt sich aus vier verschachtelten Bereichen zusammen (von innen nach außen)[cite: 9]:

• Content (Inhaltsbereich): Enthält den eigentlichen Inhalt wie Text, Bilder oder verschachtelte Elemente[cite: 9].
• Padding (Innenabstand): Transparentes Polster zwischen dem Inhaltsbereich und dem Rahmen[cite: 9].
• Border (Rahmen): Eine Linie, die den Inhaltsbereich samt Padding umschließt[cite: 9].
• Margin (Außenabstand): Transparenter Raum außerhalb des Rahmens, der den Abstand zu benachbarten Elementen regelt[cite: 9].

Die Abmessungen werden über die Eigenschaften width (Breite) und height (Höhe) gesteuert[cite: 9]. Als Werte dienen Längenangaben (z. B. px, em), Prozentwerte oder auto[cite: 9].

Über die Eigenschaft box-sizing wird festgelegt, wie sich die Gesamtbreite und -höhe eines Elements berechnen[cite: 9]:

• content-box (Standard): width und height beziehen sich ausschließlich auf den Inhaltsbereich[cite: 9]. Padding und Border werden zur Gesamtbreite hinzuaddiert[cite: 9].
• border-box: width und height beinhalten bereits Padding und Border[cite: 9]. Dies erleichtert responsive Layouts erheblich[cite: 9].

/* Berechnungsbeispiel bei width: 500px, padding: 50px, border: 10px */
 
div.content-box-example {
  box-sizing: content-box;
  width: 500px;
  /* Gesamte sichtbare Breite = 500px + 2x50px + 2x10px = 620px */
}
 
div.border-box-example {
  box-sizing: border-box;
  width: 500px;
  /* Gesamte sichtbare Breite bleibt exakt 500px */
}

Wenn Inhalt die festgelegten Abmessungen einer Box überschreitet, steuert overflow das Verhalten[cite: 9]:

• visible: Inhalt quillt über die Box hinaus (Standard)[cite: 9].
• hidden: Überstehender Inhalt wird abgeschnitten und ist unsichtbar[cite: 9].
• scroll: Erzeugt dauerhaft Bildlaufleisten[cite: 9].
• auto: Zeigt Bildlaufleisten nur bei Bedarf an[cite: 9].

Das Padding lässt sich einzeln (padding-top, padding-right, padding-bottom, padding-left) oder über die Kurzschreibweise im Uhrzeigersinn (TRouBLe: Top, Right, Bottom, Left) definieren[cite: 9]:

/* Einzelne Angaben */
blockquote {
  padding-top: 2em;
  padding-right: 4em;
  padding-bottom: 2em;
  padding-left: 4em;
}
 
/* Kurzschreibweisen */
blockquote { padding: 2em 4em 2em 4em; } /* Oben, Rechts, Unten, Links */
blockquote { padding: 2em 4em 2em; }     /* Oben, Links+Rechts, Unten */
blockquote { padding: 2em 4em; }         /* Oben+Unten, Links+Rechts */
blockquote { padding: 2em; }             /* Alle 4 Seiten gleich */

Ein Rahmen benötigt zwingend die Angabe eines Stil-Typs (border-style), damit er gerendert wird[cite: 9].

• Mögliche Stile (border-style): none, solid, dotted, dashed, double, groove, ridge, inset, outset[cite: 9].
• Breite (border-width): Längenangaben oder Schlüsselwörter (thin, medium, thick)[cite: 9].
• Farbe (border-color): Farbwerte[cite: 9].

/* Einzelausdrücke */
div#example {
  border-width: 2px;
  border-style: solid;
  border-color: aqua;
}
 
/* Kurzschreibweise: border: [width] [style] [color]; */
p.example {
  border: 2px dotted aqua;
}

Mit border-radius werden Ecken abgerundet[cite: 9]. Werte können in Pixeln oder Prozent angegeben werden[cite: 9].

p {
  border-radius: 1em;          /* Alle Ecken gleich */
  border-radius: 1em 2em;      /* Oben-Links/Unten-Rechts , Oben-Rechts/Unten-Links */
  border-top-left-radius: 50px;/* Einzelne Ecke */
}

Der Margin erzeugt Abstand außerhalb des Rahmens zu benachbarten Elementen[cite: 9]. Die Syntax entspricht exakt der Kurzschreibweise von Padding[cite: 9].

Vertikale Margins (oben/unten) von aufeinanderfolgenden Block-Elementen addieren sich nicht, sondern kollidieren[cite: 9]. Es setzt sich jeweils der größere Wert durch[cite: 9].

/* Beispiel für Collapsing: */
.element-top { margin-bottom: 4em; }
.element-bottom { margin-top: 2em; }
 
/* Der resultierende Abstand zwischen den Elementen beträgt 4em (nicht 6em). */

Steuert das Verhalten der Elementbox im Textfluss[cite: 9]:

• block: Element nimmt die volle Breite ein und beginnt auf einer neuen Zeile[cite: 9].
• inline: Element fließt im Text und nimmt nur die Breite seines Inhalts ein (Breite/Höhe nicht anpassbar)[cite: 9].
• inline-block: Fließt wie Inline, erlaubt aber die Definition von width und height[cite: 9].
• flex / grid: Aktiviert moderne Layout-Kontexte[cite: 9].
• none: Blendet das Element vollständig aus[cite: 9].

Erzeugt einen Schattenwurf um die Elementbox[cite: 9]. Syntax: box-shadow: [horizontal-offset] [vertical-offset] [blur-distance] [spread-distance] [color] [inset];[cite: 9]

div.shadow-a { box-shadow: 6px 6px gray; }                      /* Harter Schatten */
div.shadow-b { box-shadow: 6px 6px 5px gray; }                  /* Weicher Schatten (Blur) */
div.shadow-c { box-shadow: 6px 6px 5px 10px gray; }             /* Blur + Ausdehnung (Spread) */
div.shadow-d { box-shadow: inset 2px 2px 4px rgba(0,0,0,0.5); } /* Innenliegender Schatten */