Advanced CSS - Collapsing margins

1. Zusammenfallende Außenabstände

So konnte man den englischen Ausdruck übersetzen. Dabei handelt es sich mal nicht um einen Bug, sondern ist Teil der Spezifikation für CSS 2.1. Und auch ein sehr schönes Beispiel, dass die Götter vom W3C von Zeit zu Zeit mal ordentlich Mist bauen, also so wie beim Box-Modell.

Das Prinzip

... gilt zunächst mal nur für vertikale Außenabstände, also margin-top und margin-bottom. Dabei werden unter bestimmten Umständen die Angaben für zwei Elemente zu einem zusammengefasst.

2. Verschachtelte Elemente

Hier tritt diese Spezifikation in Kraft, wenn zwei verschachtelte Block-Element über ein margin verfügen, aber zusätzlich folgende Bedingungen gelten:

Das äußere <div> hat kein oberen und unteren Rahmen
Das äußere <div> besitzt kein vertikales padding
Das äußere <div> verfügt ober- und unterhalb über keinen Inhalt

Laut Spezifikation kann es noch andere Gründe geben, aber die ignoriere ich mal, da es hier nur um das grundsätzliche Problem geht. Außerdem habe ich euch ja schon beim Link "Umständen" den entsprechenden Hinweis gegeben.

Ein Beispiel


div.aussen
{
  margin:20px;
  background:#dadada;
}
div.innen
{
  margin:20px; 
  background: #f00;
}
...
<div class="aussen">
  <div class="innen">
    <p>bla</p>
  </div>
</div>

Seht ihr es? Das äußere Element und das innere stehen auf gleicher Höhe. Schuld daran ist diese idiotische Spezifikation, die meiner Meinung nach so überflüssig ist, wie ein Kropf(f).

3. Ein Tipp

Spielt mal ein wenig herum. Arbeitet mit zusätzlichem Inhalt ober- und unterhalb des <div class="innen">. Werkelt mit padding bei div.aussen herum, setzt dort auch mal verschiedene border-Anweisungen (top/bottom) und macht das, was euch gerade einfällt. Dann werdet ihr sehen, welche Auswirkungen das auf das Aussehen hat.

4. Noch ein Tipp

Wenn ihr dieses Problem umgehen wollt, so arbeitet beim äußeren <div> mit padding anstelle eines margin beim inneren. Ich selber gehe eigentlich immer so vor, darum ist mir dieses Problem auch erstmalig in meinem Lieblingsforum begegnet. Die Verweise dazu:

5. Fazit

Wer sich diesen Schwachsinn ausgedacht hat, gehört an den Pranger gestellt! Fernab jedweder Praxis, ohne Sinn und Verstand und der Urheber dieses Machwerks hat wohl nicht mal fünf Minuten darüber nachgedacht! Erinnert mich an deutsche Behörden und deren Vorschriften. Aber was soll's, ihr kennt ja das Gegenmittel padding.

zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt