Die Ränder in Listen

(Auszug aus "CSS − Anspruchsvolle Websites mit Cascading Stylesheets" von Rachel Andrew & Dan Shafer)

Normalerweise werden Listen in grafischen Browsern mit einem 50 Pixel breiten Rand auf der linken Seite angezeigt. Damit steht Platz für Aufzählungszeichen zur Verfügung (beispielsweise Punkte in einer unsortierten Liste oder Ziffern in einer nummerierten Liste). Unglücklicherweise gibt die CSS-Spezifikation keine Auskunft darüber, wie der Browser diesen Rand anzeigen soll: ob als linker Außenrand oder als linker Innenrand. Die Beschreibung der Eigenschaft marker-offset legt jedoch nahe, dass die Einrückung mit der margin-Eigenschaft gesetzt wurde.

Egal, was in der Spezifikation beabsichtigt wurde, fügen Firefox und Safari links von Listen vorgabemäßig einen linken Innenrand zu, während andere Browser (einschließlich Internet Explorer und Opera) einen linken Außenrand zufügen. Das können Sie einfach nachprüfen, indem Sie ein ul- oder ol-Element mit einer Hintergrundfarbe unterlegen. In den meisten Browsern wird der Hintergrund die Aufzählungszeichen nicht unterlegen, außer im Firefox und Safari.

Aus diesem Grund müssen Sie immer beide Eigenschaften definieren, wenn Sie die Vorgabewerte der Ränder für Listen ändern möchten. Wenn Sie beispielsweise nur einen Außenrand setzen, zeigt der Firefox die normale Einrückung an, während die anderen Browser diese Einstellung überschreiben. Wenn Sie nur einen Innenrand angeben, zeigt der Internet Explorer die normal Einrückung von 50 Pixeln an. Nur wenn Sie sowohl einen Außenrand als auch einen Innenrand definieren (üblicherweise wird padding: 0 gesetzt und nur die margin-Eigenschaft bekommt einen Wert), wird der linke Abstand einer Liste in allen Browsern gleich angezeigt.

Vertikale Außenränder werden mit der Eigenschaft margin-top und margin-bottom gesetzt. Die folgende HTML-Seite verdeutlicht vertikale Außenränder:

Wie diese Seite dargestellt wird, zeigt die folgende Abbildung.

Abbildung: Vertikale Randeinstellungen summieren sich nicht auf.

Im Gegensatz zu horizontalen Rändern summieren sich vertikale Ränder nicht auf. Stehen zwei Elemente direkt übereinander wie h1 und h2 in obiger Abbildung, richtet sich der Abstand zwischen ihnen nach dem größeren Wert der margin-bottom-Eigenschaft des oberen Elements oder der margin-top-Eigenschaft des unteren Elements. In unserem Beispiel sind beide mit 3cm definiert, sodass der Abstand zwischen den Elementen 3cm beträgt (und nicht 6cm, wie Sie vielleicht angenommen hatten). Dem wäre nur dann so gewesen, wenn für das h1-Element margin-bottom: 6cm gesetzt worden wäre. In unserem Fall ist das body-Element der umgebende Block und das ist aus praktischen Gründen der sichtbare Bereich des Browserfensters.

Für die Definition eines Außenrands können auch negative Werte eingesetzt werden. Das kann nützlich sein, wenn man zum Beispiel für den body-Bereich einer HTML-Seite einen Wert für margin-left festgelegt hat und ein Element auf der Seite diesen Rand nach links überschreiten soll. Der folgende Quelltext führt zur Darstellung in der anschließenden Abbildung.

Abbildung: Negative Werte für den Außenrand.

Ebenso wie mit padding für den Innenrand gibt es mit margin auch eine zusammenfassende Eigenschaft für die Außenränder. Für die Angabe mehrerer Werte für margin gelten die Regeln aus der Tabelle Die Anzahl der Werte für die Kurzform von padding.