Direktnavigation

Weitere Infos

Sie lesen:
LB Teil 1 (2009)

Little Boxes Teil 1 (Cover)

Aktuell (2015)
Einstieg in CSS

Einstieg in CSS (Cover)

NEU:
WordPress 4

Einstieg in CSS (Cover)

Inhaltsbereich

7.2 Das Box-Modell in der Übersicht

Alle Boxen sind nach einem bestimmten Schema aufgebaut, das Box-Modell genannt wird.

Alle Boxen sind gleich: das Modell

Die folgende Abbildung zeigt eine schematische Darstellung des Box-Modells:

Abbildung 7.1: Das Box-Modell – Grundlage des Gestaltens mit CSS
Abbildung 7.1: Das Box-Modell – Grundlage des Gestaltens mit CSS

Fast alle HTML-Elemente haben die Eigenschaften width, height, padding, border und margin. Je besser Sie dieses Box-Modell verstehen, desto leichter wird Ihnen das Gestalten von Webseiten mit CSS fallen.

Hier eine kleine Übersicht über die zentralen Begriffe mit Übersetzungen, die mir im Laufe der Zeit in verschiedenen Dokumentationen und Programmen begegnet sind:

Englisch Deutsch
content Inhalt, Inhaltsbereich
width Breite, Inhaltsbreite
padding Innenabstand, Polsterung, Auffüllung, Füllung
border Rahmen, Rahmenlinie
margin Außenabstand, Rand

Der Inhaltsbereich: width (Breite) und height (Höhe)

Text und Grafiken stehen im Inhaltsbereich eines Elements, dessen Breite mit width und dessen Höhe mit height definiert wird. Wenn diese Angaben nicht explizit im Stylesheet auftauchen, gelten die folgenden Grundregeln:

  • Ohne Angabe von width werden Block-Elemente so breit wie das umgebende Element.
  • Ohne Angabe von height werden alle Elemente nur so hoch wie ihr Inhalt.

Beachten Sie, dass width die Breite des Inhaltsbereichs definiert, und nicht die Gesamtbreite des Elements. Eigentlich wäre content-width (also Breite des Inhalts) ein genauerer Name. Weiter unten finden Sie ein Beispiel zur Berechnung der Gesamtbreite eines Elements.

Inline-Elemente ohne width und height

Eine Besonderheit in CSS ist, dass bei Inline-Elementen wie strong, a und em die Breite und Höhe automatisch durch die Ausdehnung des Inhalts bestimmt werden. Sie können weder mit width eine feste Breite noch mit height eine feste Höhe bekommen. 

Der Innenabstand: padding (Polsterung)

Nach dem Inhaltsbereich folgt in jeder Box der Innenabstand (padding). Das padding liegt innerhalb der Box und übernimmt die Hintergrundfarbe des Inhaltsbereichs.

padding kann für alle vier Seiten einer Box einzeln definiert werden. Die Eigenschaften heißen dann wie folgt:

  • padding-top für den oberen Innenabstand
  • padding-right für den rechten Innenabstand
  • padding-bottom für den unteren Innenabstand
  • padding-left für den linken Innenabstand

Das padding funktioniert übrigens bei Block- und Inline-Elementen absolut identisch.

Der Hintergrund: Inhaltsbereich plus Innenabstand

Wenn ein Element eine Hintergrundfarbe oder -grafik hat, so erstreckt diese sich über Inhaltsbereich und padding.

Der Rahmen drum herum: border (Rahmenlinien)

Um das padding legt sich der Rahmen (border), der Rand der Kiste, der eine eigene Breite (width), Linienart (style) und Farbe (color) annehmen kann.

Auch border kann für alle vier Seiten unterschiedlich sein. Die Eigenschaften heißen dann:

  • border-top für die Rahmenlinie oben
  • border-right für die rechte Rahmenlinie
  • border-bottom für die untere Rahmenlinie
  • border-left für die linke Rahmenlinie

border ist sehr flexibel und kann für jede dieser vier Seiten eine gesonderte Breite, Linienart und Farbe erhalten. Macht summa summarum maximal zwölf mögliche border-Deklarationen für eine
CSS-Regel, die dann so wunderschöne Namen wie border-top-width, border-right-color oder border-left-style haben.

Die Regeln zur Erstellung von Rahmenlinien mit border gelten ohne Einschränkung auch für Inline-Elemente.

Der Außenabstand: margin (Rand)

Jede Box kann einen Außenabstand (margin) haben, der ebenfalls für alle vier Seiten einzeln definiert werden kann:

  • margin-top für den oberen Außenabstand
  • margin-right für den rechten Außenabstand
  • margin-bottom für den unteren Außenabstand
  • margin-left für den linken Außenabstand

Der Außenabstand liegt außerhalb der Box und übernimmt die Hintergrundfarbe des umgebenden Elements.

margin darf – im Gegensatz zu border und padding – übrigens auch negative Werte haben.

Inline-Elemente ohne margin-top und margin-bottom

Kleine, aber feine Einschränkung: Inline-Elemente kennen weder margin-top noch margin-bottom. Links und rechts funktioniert mit margin-left und margin-right alles wie gewohnt, aber oben und unten gibt es bei Inline-Elementen keinen Außenabstand. Details dazu in »Little Boxes, Teil 2« im Abschnitt »Das Box-Modell für Inliner«.

Wenig intuitiv: die Gesamtbreite einer Box berechnen

Auf den ersten Blick ungewöhnlich ist die Berechnung der Gesamtbreite einer Box. width heißt zwar »Breite«, damit ist aber wie erwähnt nicht die Gesamtbreite der Box gemeint, sondern die Breite des
Inhaltsbereichs.

Zur Erklärung ein Beispiel, dem folgende CSS-Regel zugrunde liegt:

div {
  width: 720px;
  padding: 20px;
  border: 0;
  margin: 10px;
}

Die Gesamtbreite der Box setzt sich aus width, padding, border und margin zusammen:

Berechnung Beispiel
width 720px
+ padding-right + 20px
+ padding-left + 20px
+ border-right-width + 0
+ border-left-width + 0
+ margin-right + 10px
+ margin-left + 10px
Gesamtbreite der Box 780px

Man muss manchmal wirklich rechnen, bis alles passt.

Für die Höhe gilt übrigens dasselbe: Die Gesamthöhe eines Elements setzt sich zusammen aus height plus padding-top plus padding-bottom plus border-top-width plus border-bottom-width plus margin-top plus margin-bottom.

Es gibt ein alternatives Box-Modell

Die Berechnung der Gesamtbreite einer Box fanden so viele Webworker gewöhnungsbedürftig, dass es inzwischen eine Alternative zum traditionellen Box-Modell gibt.

Das klassische Modell heißt »Content-Box«, weil die Breite nur den Inhaltsbereich umfasst, die Alternative wird »Border-Box« genannt, weil die Breite inklusive padding und border gemessen wird.

Mehr Infos dazu finden Sie z. B. in meinem Artikel bei Dr. Web: 

Alle Browser verwenden aber standardmäßig das traditionelle Box-Modell, und deshalb lernen Sie in dieser Einführung zunächst die klassische Variante.