Empfohlen

• Zahnarzt Weber Zürich
• Mezzoblue Markup Guide
• Das Zen des CSS Design
• Neuer HWG CSS-Kurs

Weiteres

• Kontakt
• Barrierefreiheit
• Englische Version

Artikel

• Barrierefreie Image maps
• Daten Tabellen (1)
• Daten Tabellen (2)

Involviert

• Research Kitchen
• <minz />
• Karl Haak
• Zausch

CSS - Höhe berechnen und Zusammenfallende Ränder

8/3/2004

...oder: das wundersame Schrumpfen von CSS Behältern!

Bei diesem Artikel handelt es sich um eine Übersetzung aus dem englischen. Folgende Namenskonventionen, die ich der Übersetzung der W3C Empfehlungen entnommen habe, sind hierbei zu beachten:
margin = Ränder
padding = Polsterbereich
border = Rahmen
normal-flow = normaler Fluss
Ein outer margin edge wäre demzufolge die äußere Randkante.

Manch einem mag es geläufig sein, dass ich nebenbei als Co-Trainer eines CSS-Workshops bei der IWAHWG beschäftigt bin. Diese Woche wurden zwei der Workshop-Teilnehmer mit ein und demselben Problem konfrontiert. Dieses Problem war Anlass für untenstehende Ausführungen.

Wer regelmäßig mit CSS arbeitet, ist bestimmt schon des öfteren über das hier beschriebene Verhalten von CSS Behältern gestolpert. Und genauso wie ich, haben bestimmt viele eine Lösung gefunden um damit umzugehen. Doch das Verständnis für das Verhalten, das Wie und Warum bleibt bei solchen Workarounds oft auf der Strecke.

Hier zum ersten Teil des Problems, aus Gründen der Übersichtlichkeit auf ein Minimum reduziert. Folgendes HTML Fragment gilt es zu betrachten:

<div>

    <p>Dies ist ein Paragraph innerhalb eines <code>div</code>-Behälters.</p>

 </div>

An dieses Fragment sind folgende CSS Stile geknüpft:

div {

   background-color: #3C75AE;

   color: #fff;

   margin-top: 10px;

 }

 
p {

   margin-top: 20px;

   margin-bottom: 20px;

   border: 1px solid #EB6B0E;

}

Ich bin mir ziemlich sicher, dass auf den ersten Blick die meisten (mich eingeschlossen) folgende Darstellung im Broswer erwarten würden:

Überraschenderweise zeigen die meisten modernen Webbrowser jedoch dieses an:

Zum Nachvollziehen gibt es hier den oben stehenden Code als Beispiel 1.

Wodurch wird dieses seltsame Verhalten ausgelöst? Zwei wesentliche Aspekte des CSS Formatierungsmodells spielen hierbei eine Rolle. Einer davon ist das Zusammenfallen von vertikalen Rändern (englisch: margin-collapsing.) Dies bedeutet, dass CSS2-konforme Browser die senkrechten Ränder (also margin-top, margin-bottom) benachbarter Elemente zusammenfallen lassen, anstatt sie zu addieren. Im Endergebnis bedeutet dies, dass der größere Abstand gewinnt und den kleineren sozusagen "verschluckt".

Für unser oben stehendes Beispiel heißt das, dass die obere Rahmenkante unseres div-Behälters 20 Pixel und nicht 30 Pixel von einem vorangehenden Element oder des umschliessenden Elements entfernt ist (vorausgesetzt natürlich, dass keines dieser Elemente einen unteren Rand hat welcher größer ist als 20px, was in unserem Beispiel jedoch nicht der Fall ist. Weiterhin sei hiermit angenommen, dass unser div Element das erste und einzige untergeordnete Element von body ist.) Hier wird also, wie bereits erwähnt der kleinere Rand zugunsten des größeren eliminiert. Illustriert sieht dies folgendermaßen aus:

Soweit so gut, aber warum ist der Paragraph denn nicht 20 Pixel von der oberen äußeren Rahmenkante des div Elements entfernt, wie in Abbildung 1 dargestellt? Warum steht der Rand des Paragraphen oben (und unten) über?

Bevor wir zu einer Antwort auf diese Fragen kommen habe ich eine Illustration des CSS Box-Modells angefertigt. Sie zeigt jedoch lediglich den vertikalen Teil, denn darum geht es hier ja hauptsächlich. Zusätzlich habe ich die englischen Namen mit eingefügt, als Referenz sozusagen:

Die Antwort auf oben gestellte Fragen leitet sich von der Tatsache ab, wie die Höhe (englisch: height) eines Blockebenen-Elements (englisch: block-level element) in CSS berechnet wird. Wird für solch ein Element im Stylesheet keine Höhenangabe definiert, dann wird dieser Wert auf auto gesetzt. auto ist der Ausgangswert für Blockebenenelemente. Per Definition ist damit die Höhe unseres div-Elements die Entfernung von der äußeren oberen Rahmenkante bis zur äußeren unteren Rahmenkante des Paragraphen. Sämtliche vertikalen Ränder des Paragraphen ragen also über das div-Element hinaus, sie stehen über. Die nächsten zwei Bilder versuchen dies zu veranschaulichen. Das erste zeigt die gesamte Box des Paragraphen, während das zweite die erwähnte Berechnung der Höhe des div-Elements dokumentiert.

Wie kann dann aber das Zusammenfallen des oberen Randes vermieden werden? Angenommen wir möchten, dass unser Paragraph 20 Pixel vom oberen Rand des div-Elements enfernt ist. Wie wäre dies zu bewerkstelligen? Die Antwort auf diese Frage liegt bereits in der Fragestellung selbst. Wir müssen die Höhe, bzw. die Höhenberechnung unseres divs verändern, und zwar in dem wir entweder einen Rahmen (englisch: border) oder einen Polsterbereich (englisch: padding) hinzufügen. Probieren wir folgende Änderungen unseres CSS-Stils:

div {

    background-color: #3C75AE;

    color: #fff;

    margin-top: 10px;

    padding-top: 1px;

    padding-bottom: 1px;

 }

Dieses kleine Codefragment verändert die Verfahrensweise der Höhenberechnung unseres div-Elements vollkommen (wobei die Höhe des Elements nach wie vor auto ist). Die Höhe unseres div-Elements ist nun die Entfernung von der äußeren oberen Randkante bis zur äußeren unteren Randkante des Paragraphen. Das gleiche wäre passiert, hätten wir anstatt eines Polsterbereiches einen Rahmen hinzugefügt. Siehe untenstehende Illustration oder aber das Beispiel 2.

Weiterführendes Beispiel, diesmal jedoch mit einem floatenden Element!

Die folgenden Abschnitte schildern vereinfacht das Problem, das während unseres CSS Workshops auftrat. Als Ausgangspunkt sei folgendes HTML-Fragment gegeben:

<body>

  <div id="verweise">

    A list of links

  </div>

  <div id="inhalt">

    ...Inzeiliger anonymer Text....

  </div>

 </body>

..und für die Präsentation folgende Stylesheets:

body {

    font: 100%/1.5 Georgia, "Times New Roman", Times, serif;

 }

 

 div#verweise {

    float: right;

    width: 50%;

    margin-top: 0;

    background-color: #EB6B0E;

    color: #fff;

 }

 

 div#inhalt {

    background-color: #3C75AE;

    color: #fff;

    margin-top: 30px;

    border: 1px solid #3C75AE;

 }

Wenn wir uns nun das Resultat dieser Zeilen in verschiedenen Internetbrowsern ansehen, erhalten wir durchaus unterschiedliche Darstellungen:

Mozilla 1.7

Opera 7.5

Internet Explorer 6

Wer möchte, kann das Verhalten seines eigenen Browsers überprüfen. Hier ist Beispiel 3.

Ganz toll, oder? Wahrlich einer der Gründe warum CSS ein Garant für graue Haare ist :)

Sehen wir uns aber einmal unser HTML-Fragment und die Stile in Ruhe an und ziehen die CSS-Empfehlungen des W3C zu Rate, dann wird ganz schnell deutlich, dass Mozilla das Beispiel korrekt umsetzt. Unter bestimmten Bedingungen trifft das auch auf die Interpretation von Opera zu (warum das so ist, erkläre ich später). Internet Explorer (Überraschung!) liegt hier falsch.

Meine allererste Vermutung war jedoch genau das Gegenteil. Was Mozilla hier zeigt kann nicht korrekt sein! Ich ging von einer eindeutigen Verletzung der Float-Regel Nummer 8 aus, welche besagt:

Also muss doch Opera richtig liegen, und selbst der IE kommt der Sache recht nahe. Dieser zweite Gedanke allein sollte bei jedermann sämtliche Alarmglocken schrillen lassen! Schauen wir also einmal, welche weiteren Anhaltspunkte sich finden lassen. Hier sticht dann Float-Regel Nummer 4 ins Auge:

In unserem Falle wäre der umschließende Block body. Und wir landen wieder bei der Frage, wo ist die obere Kante, bzw. was ist die Höhe von body? Die Stile enthalten lediglich eine font Deklaration. Dies bedeutet, dass die durch die CSS-Regeln vorgegebenen Anfangswerte für Rand, Polsterbereich und Rahmen wären in diesem Falle also 0, 0 und none was gleichbeutend ist mit kein Rand, kein Polsterbereich und kein Rahmen.

Wenn wir also berücksichtigen was wir im ersten Beispiel gelernt haben, dann heißt das, dass die Höhe von body nun die Entfernung von der äußeren oberen Rahmenkante zur äußeren unteren Rahmenkante seiner untergeordneten, im normalen Fluss befindlichen Elemente (in unserem Falle, der Inhalts-div) ist, während die Ränder dieser untergeordneten Elemente darüber hinausragen.

Wie kommt es dann, dass Opera die ganze Geschichte unterschiedlich darstellt und sich trotzdem korrekt verhält? In diesem Falle muss man sich vor Augen halten, dass die meisten Browser von Haus aus bereits eigene "Browserstylesheets" implementiert haben. Diese Stylesheets regeln zum Beispiel die Anzeige von Hyperlinks oder Schriftarten und -größe auf ungestyleten HTML-Seiten (aus diesem Grund sind nämlich Verweise/Links, wenn nichts anderes angegeben, in den meisten Fällen blau und unterstrichen.) Zusätzlich wird in diesen Browserstylesheets ein Rand und ein Polsterbereich für das body-Element gesetzt.

Da wir in unseren Stilen weder Rand noch Polsterbereich definiert haben, werden unsere durch die CSS-Regeln vorgegebenen Anfangswerte durch das Browserstylesheet überschrieben. Der Knackpunkt hierbei ist, dass Opera andere Stile benutzt als Mozilla oder der Internet Explorer. Bei Opera wird definiert:

body {

    margin: 0;

    padding: 8px;

 }

Mozilla und Internet Explorer geben ihrerseits folgende Werte vor:

body {

    margin: 8px;

    padding: 0;

 }

Nur ein kleiner Unterschied, aber mit sehr großer Wirkung auf das Aussehen der Seite. Machen wir uns die Mühe und kopieren Opera's Stile in unser Beispiel:

body {

    font: 100%/1.5 Georgia, "Times New Roman", Times, serif;   

    margin: 0;

    padding: 8px;

 }

Da es jetzt einen Polsterbereich gibt, ändert sich die Höhe von body. Berechnet wird nun die Entfernung von der äußeren oberen Randkante zur äußeren unteren Randkante seines untergeordneten, sich im normalen Fluss befindlichen Elements.

Auch dieses letzte Beispiel gibt es in "echt". Beispiel 4.

Wem die hier dargestellten Illustrationen zu klein sind, ich habe alle noch einmal in höherer Auflösung auf einer eigenen Seite bereitgestellt.

Empfohlenes Lesematerial

Weitestgehend sind hier englischsprachige Verweise aufgeführt, aber wer dieser Sprache mächtig ist, sollte die folgenden Empfehlungen unbedingt ansehen.

1. Andy Budd: No margin for error
2. Eric Meyer: Cascading Style Sheets, The Definitive Guide - Second Edition
3. CSS 2 Spezifikation: 10.6 Höhen und Ränder berechnen.