margin-top wirkt sich auf Elternelement aus

[Christian]

Folgendes Markup:

<div id="#container">
  <div id="#header"></div>
</div>

Mit diesem CSS:
#container { background-color:#fee; width:60em; }
#top { height:10em; background-color:#efe; margin:1em; }

in einem XHTML-Transitional Dokument bewirkt, dass im #container zwar links und rechts 1em Abstand bleibt, oben und unten allerdings wird der Abstand außerhalb von #container berechnet, nicht relativ dazu.

Anzusehen unter:
http://root.kno.at/files/divmargin.html

Meine Frage ist: Warum? Es sollte doch eigentlich der Abstand immer zum Elternelement gemessen werden.

[MudGuard]

Hi,

in einem XHTML-Transitional Dokument bewirkt, dass im #container zwar links und rechts 1em Abstand bleibt, oben und unten allerdings wird der Abstand außerhalb von #container berechnet, nicht relativ dazu.

Stichwort: Collapsing Margins.

Das ist so definiert: http://localhost/Doku/CSS21/box.html#collapsing-margins

cu,
Andreas

[Christian]

Stichwort: Collapsing Margins.

Hm okay, das erklärts dann wohl. Dennoch find' ich das Verhalten seltsam, den Abstand "auf das Elternelement zu übertragen". Hätten beide divs margin:1em wär das schlüssig, aber auch wenn ich für #container margin:0; notiere, wird der Abstand "heraus-geerbt". Irgendwie nicht optimal.

[Meierhuberschmidt]

http://localhost/Doku/CSS21/box.html#collapsing-margins

Was muss ich auf meiner Festplatte speichern damit dieser Link funktioniert? Die Selfhtml-Offline-Dokumentation?

;)

[MudGuard]

Hi,
http://localhost/Doku/CSS21/box.html#collapsing-margins

Was muss ich auf meiner Festplatte speichern damit dieser Link funktioniert? Die Selfhtml-Offline-Dokumentation?

Nein, den CSS-Standard, Version 2.1. Und einen passend konfigurierten Webserver ;-)

http://www.w3.org/TR/CSS21/box.html#collapsing-margins

cu,
Andreas