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 vertikalespadding
- 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