Das Box-Modell – CSS Schnellreferenz

Was in diesem Kapitel steht

Kapitel 8 der Spezifikation beschreibt die Box, aus der jedes Element besteht: den Inhalt, den Innenabstand, den Rahmen und den Außenabstand. Die Tabelle führt jede der drei Abstands- und Rahmenfamilien in allen Schreibweisen auf – die vier Einzelseiten, die Kurzform für alle vier zugleich und, beim Rahmen, die Aufteilung nach Breite, Stil und Farbe.

Zwei Spalten lohnen hier besondere Aufmerksamkeit. Die Spalte für den Bezugswert nennt bei allen Abständen die Breite des enthaltenden Blocks, auch bei den senkrechten – ein Prozentwert oben misst also nicht an der Höhe. Und die Spalte für die Vererbung steht überall auf Nein: Abstände und Rahmen werden nie vererbt, sie müssen an jedem Element gesetzt werden, an dem sie erscheinen sollen.

Browser-Unterstützung

Eigenschaft	Browser-Support
border	Alle Browser Die Eigenschaft `border` wird von allen modernen Browsern unterstützt, auf Einschränkungen wird bei den Einzeleigenschaften hingewiesen.
border-color	IE 7 IE 7 ignoriert den Wert `inherit`. Innerhalb der Farbbezeichnungen nach SVG-1.0 akzeptiert IE 7 Grautöne nur mit der Bezeichnung '...`gray`...', nicht in der Schreibweise '...`grey`...'. IE/Win 5.x, IE/Win 6 IE/Win zeigt die gleichen Probleme wie IE 7, aber ignoriert zusätzlich den Wert `transparent`. Konqueror 3.5 Konqueror erkennt innerhalb der Farbbezeichnungen nach SVG-1.0 auch Grautöne in der Schreibweise '...`grey`...'. Ausnahme: der Wert `grey` selbst wird ähnlich wie `silver` interpretiert.
border-style	IE/Win 5.x, IE/Win 6 IE/Win erkennt den Wert `inherit` nicht, an Tabellenelementen wird der Wert `hidden` ignoriert, und der Wert `dotted` wird wie `dashed` dargestellt, wenn die Rahmenbreite nur 1 Pixel ist. IE 7 Der `Border-style`-Bug ist korrigiert, die Defizite bezügl. der Werte `hidden` an Tabellenelementen und `inherit` bleiben. Konqueror 3.5 Konqueror macht im normalen Elementfluss einen nicht erlaubten Unterschied zwischen den Werten `none` und `hidden`, indem er `hidden` wie einen transparenten Rahmen darstellt.
border-[t\|r\|b\|l]	Alle Browser Die Eigenschaften `border-top`, `border-right`, `border-bottom` und `border-left` werden von allen modernen Browsern unterstützt, auf Einschränkungen wird bei den Einzeleigenschaften hingewiesen.
border-[t\|r\|b\|l]-color	IE/Win 5.x, IE/Win 6, IE 7 IE/Win ignoriert die Werte `transparent` und `inherit`. Innerhalb der Farbbezeichnungen nach SVG-1.0 akzeptiert IE/Win Grautöne nur mit der Bezeichnung '...`gray`...', nicht in der Schreibweise '...`grey`...'. Konqueror 3.5 Konqueror erkennt innerhalb der Farbbezeichnungen nach SVG-1.0 auch Grautöne in der Schreibweise '...`grey`...'. Ausnahme: der Wert `grey` selbst wird ähnlich wie `silver` interpretiert.
border-[t\|r\|b\|l]-style	IE/Win 5.x, IE/Win 6 IE/Win erkennt den Wert `inherit` nicht, an Tabellenelementen wird der Wert `hidden` ignoriert, und der Wert `dotted` wird wie `dashed` dargestellt, wenn die Rahmenbreite nur 1 Pixel ist. IE 7: Der `Border-style`-Bug ist korrigiert. Opera 8 Opera 8 erkennt den Wert `inherit` hier nur für die Kurzschrifteigenschaft, nicht für die Einzeleigenschaften. Opera 9 In der Version 9 hat Opera das Problem gelöst, `inherit` wird jetzt an allen Einzeleigenschaften erkannt. Konqueror 3.5 Konqueror macht im normalen Elementfluss einen nicht erlaubten Unterschied zwischen den Werten `none` und `hidden`, indem er `hidden` wie einen transparenten Rahmen darstellt.
border-[t\|r\|b\|l]-width	Alle Browser Die Eigenschaften `border-top-width`, `border-right-width`, `border-left-width` und `border-bottom-width` werden von allen modernen Browsern unterstützt, mit diesen Ausnahmen: IE 7 Der Wert `inherit` wird auch in der neuesten Version vom Microsoft-Browser noch nicht erkannt. Opera 8.5 Der norwegische Browser erkennt den Wert `inherit` nur an der Kurzschrift- Eigenschaft, nicht an den Einzeleigenschaften. Opera 9 Auch hier hat Opera das Problem in der Version 9 gelöst, `inherit` wird jetzt an allen Einzeleigenschaften erkannt.
border-width	Alle Browser Die Eigenschaft `border-width` wird von allen modernen Browsern unterstützt, mit diesen Ausnahmen: IE 7 Der Wert `inherit` wird auch in der neuesten Version vom Microsoft-Browser noch nicht erkannt.
margin	IE/Win 5.x An Inline- Level- Elementen hat dieser Browser bis Version 5.5 scheinbar abhängig vom Kontext einige merkwürdige Darstellungsprobleme.
margin-[t\|r\|b\|l]	IE/Win 5.x An Inline- Level- Elementen hat dieser Browser bis Version 5.5 scheinbar abhängig vom Kontext einige merkwürdige Darstellungsprobleme.
padding	Alle Browser: Die Eigenschaft `padding` wird von allen modernen Browsern korrekt dargestellt.
padding-[t\|r\|b\|l]	Alle Browser: Die Eigenschaften `padding-top`, `padding-right`, `padding-bottom` und `padding-left` werden von allen modernen Browsern korrekt dargestellt.

Schnellreferenz-Tabelle

Cascading Style Sheets ::Schnellreferenz

CSS 1 & CSS 2: Das Box- Modell

Die Stylesheet-Schnellreferenz kann auch als PDF-Datei herunter geladen werden.

Eigenschaft	Mögliche Werte	Ausgangs- wert	Vererbung	Anwend- barkeit	%-Bezugs- wert	Medien- gruppe
Eigenschaft	Mögliche Werte	Ausgangs- wert	Vererbung	Anwend- barkeit	%-Bezugs- wert	Medien- gruppe
Hinweis 1: Ausnahmen: Tabellenspalten und -spaltengruppen, Tabellenreihen und -reihengruppen, Tabellenzellen. Hinweis 2: `margin-top` und `margin-bottom` sind auf nicht-replatzierte Inline- Level- Elemente nicht anwendbar. Hinweis 3: `margin-right` und `margin-left` werden in nicht-replazierten Inline- Level- Elementen, wenn sie sich über mehrere Textzeilen erstrecken, nur links in der ersten Zeile und rechts in der letzten Zeile dargestellt. Hinweis 4: Ausnahmen sind Elemente vom Typ `table-row-group`, `table-header-group`, `table-footer-group`, `table-row`, `table-column-group` und `table-column`. Hinweis 5: Für die Werte `hidden`, `inset` und `outset` der Eigenschaft `border-style` gelten an Tabellenelementen leicht geänderte Vorgaben.
`margin` (Kurzschrift)	Längenwerte, Prozentangaben, (1, 2, 3 oder 4 Werte möglich), `inherit`	Siehe Einzel- eigen- schaften	Nein	Alle Elemente, Ausn.: ¹)	Breite d. um- schließenden Blocks	Visual
`margin-top`	Längenwerte, Prozentangaben, `inherit`	`0`	Nein	Alle Elemente, Ausn.: ¹) ²)	Breite d. um- schließenden Blocks	Visual
`margin-right`	Längenwerte, Prozentangaben, `inherit`	`0`	Nein	Alle Elemente, Ausn.: ¹) ³)	Breite d. um- schließenden Blocks	Visual
`margin-bottom`	Längenwerte, Prozentangaben, `inherit`	`0`	Nein	Alle Elemente, Ausn.: ¹) ²)	Breite d. um- schließenden Blocks	Visual
`margin-left`	Längenwerte, Prozentangaben, `inherit`	`0`	Nein	Alle Elemente, Ausn.: ¹) ³)	Breite d. um- schließenden Blocks	Visual
`padding` (Kurzschrift)	Längenwerte Prozentangaben (1, 2, 3 oder 4 Werte möglich), `inherit`	Siehe Einzel- eigen- schaften	Nein	Alle Elemente, Ausn.: ⁴)	Breite d. um- schließenden Blocks	Visual
`padding-top`	Längenwerte, Prozentangaben, `inherit`	`0`	Nein	Alle Elemente, Ausn.: ⁴)	Breite d. um- schließenden Blocks	Visual
`padding-right`	Längenwerte Prozentangaben, `inherit`	`0`	Nein	Alle Elemente	Breite d. um- schließenden Blocks	Visual
`padding-bottom`	Längenwerte Prozentangaben, `inherit`	`0`	Nein	Alle Elemente	Breite d. um- schließenden Blocks	Visual
`padding-left`	Längenwerte Prozentangaben, `inherit`	`0`	Nein	Alle Elemente	Breite d. um- schließenden Blocks	Visual
Eigenschaft	Mögliche Werte	Ausgangs- wert	Vererbung	Anwend- barkeit	%-Bezugs- wert	Medien- gruppe
`border-width` (Kurzschrift)	Längenwerte `thin medium thick` (1, 2, 3 oder 4 Werte möglich) `inherit`	Siehe Einzel- eigen- schaften	Nein	Alle Elemente	Nicht zutreffend	Visual
`border-top-width`	Längenwerte `thin medium thick inherit`	`medium`	Nein	Alle Elemente	Nicht zutreffend	Visual
`border-right-width`	Längenwerte `thin medium thick inherit`	`medium`	Nein	Alle Elemente	Nicht zutreffend	Visual
`border-bottom-width`	Längenwerte `thin medium thick inherit`	`medium`	Nein	Alle Elemente	Nicht zutreffend	Visual
`border-left-width`	Längenwerte `thin medium thick inherit`	`medium`	Nein	Alle Elemente	Nicht zutreffend	Visual
Eigenschaft	Mögliche Werte	Ausgangs- wert	Vererbung	Anwend- barkeit	%-Bezugs- wert	Medien- gruppe
`border-style` (Kurzschrift) (Siehe auch bei Tabelleneigenschaften)	`none ⁵) hidden dotted dashed solid double groove ridge inset outset` (1, 2, 3 oder 4 Werte möglich) `inherit`	Siehe Einzel- eigen- schaften	Nein	Alle Elemente	Nicht zutreffend	Visual
`border-top-style`	`none ⁵) hidden dotted dashed solid double groove ridge inset outset inherit`	`none`	Nein	Alle Elemente	Nicht zutreffend	Visual
`border-right-style`	`none ⁵) hidden dotted dashed solid double groove ridge inset outset inherit`	`none`	Nein	Alle Elemente	Nicht zutreffend	Visual
`border-bottom-style`	`none ⁵) hidden dotted dashed solid double groove ridge inset outset inherit`	`none`	Nein	Alle Elemente	Nicht zutreffend	Visual
`border-left-style`	`none ⁵) hidden dotted dashed solid double groove ridge inset outset inherit`	`none`	Nein	Alle Elemente	Nicht zutreffend	Visual
Eigenschaft	Mögliche Werte	Ausgangs- wert	Vererbung	Anwend- barkeit	%-Bezugs- wert	Medien- gruppe
`border-color` (Kurzschrift)	Farbnamen `#rrggbb #rgb rgb(rr%,gg%,bb%) rgb(rrr,ggg,bbb) transparent` (1, 2, 3 oder 4 Werte möglich) `inherit`	Siehe Einzel- eigen- schaften	Nein	Alle Elemente	Nicht zutreffend	Visual
`border-top-color`	Farbnamen `#rrggbb #rgb rgb(rr%,gg%,bb%) rgb(rrr,ggg,bbb) transparent inherit`	Wert von `color`	Nein	Alle Elemente	Nicht zutreffend	Visual
`border-right-color`	Farbnamen `#rrggbb #rgb rgb(rr%,gg%,bb%) rgb(rrr,ggg,bbb) transparent inherit`	Wert von `color`	Nein	Alle Elemente	Nicht zutreffend	Visual
`border-bottom-color`	Farbnamen `#rrggbb #rgb rgb(rr%,gg%,bb%) rgb(rrr,ggg,bbb) transparent inherit`	Wert von `color`	Nein	Alle Elemente	Nicht zutreffend	Visual
`border-left-color`	Farbnamen `#rrggbb #rgb rgb(rr%,gg%,bb%) rgb(rrr,ggg,bbb) transparent inherit`	Wert von `color`	Nein	Alle Elemente	Nicht zutreffend	Visual
`border-top` (Kurzschrift)	`<border-width>`, `<border-style>`, `<border- top-color>` (Reihenfolge beachten) `inherit`	Siehe Einzel- eigen- schaften	Nein	Alle Elemente	Nicht zutreffend	Visual
`border-right` (Kurzschrift)	`<border-width>`, `<border-style>`, `<border- top-color>` (Reihenfolge beachten) `inherit`	Siehe Einzel- eigen- schaften	Nein	Alle Elemente	Nicht zutreffend	Visual
`border-bottom` (Kurzschrift)	`<border-width>`, `<border-style>`, `<border- top-color>` (Reihenfolge beachten) `inherit`	Siehe Einzel- eigen- schaften	Nein	Alle Elemente	Nicht zutreffend	Visual
`border-left` (Kurzschrift)	`<border-width>`, `<border-style>`, `<border- top-color>` (Reihenfolge beachten) `inherit`	Siehe Einzel- eigen- schaften	Nein	Alle Elemente	Nicht zutreffend	Visual
`border` (Kurzschrift)	`<border-width>`, `<border-style>`, `<border- top-color>` (Reihenfolge beachten) `inherit`	Siehe Einzel- eigen- schaften	Nein	Alle Elemente	Nicht zutreffend	Visual

Schnellreferenz Das Box-Modell

Was in diesem Kapitel steht

Browser-Unterstützung

Schnellreferenz-Tabelle

CSS 1 & CSS 2: Das Box- Modell