Margin-top/bottom berechnet sich aus Breite... WTF !?

[Christian S.]

Hi,

kann mir mal jemand erklären, was sich das W3C bei dieser Spezifikation gedacht hat:

< http://www.w3.org/TR/CSS21/box.html#margin-properties>

==
The percentage is calculated with respect to the width of the generated box's containing block. Note that this is true for 'margin-top' and 'margin-bottom' as well.

Speziell der letzte Satz...

wenn ich also so was hier habe:

<div style="height:40px;width:1000px">
  <div style="margin-top:50%">
  </div>
</div>

dann sind die 50% des inneren Divs nicht wie eigentlich erwartet 20px sondern 500px.

Das ist doch total unintuitiv. Zumindest bei mir...

Aus top/bottom Angaben ergibt sich nun mal eine Höhe, und aus left/right eine Breite.

Wie kann ich sonst erreichen, dass ein Element oben einen margin-top:50% in Bezug auf die Höhe des Elternelements hat? Nur mit absoluten (errechneten) Angaben?

Gruß!

[Jonathan]

Hallo Christian,

Wie kann ich sonst erreichen, dass ein Element oben einen margin-top:50% in Bezug auf die Höhe des Elternelements hat? Nur mit absoluten (errechneten) Angaben?

Nicht. Das Problem ist im allgemeinen, dass sich ja die Höhe des Elternelementes nach der Höhe der Kindelemente richtet. Und wenn sich jetzt auch noch die Kindelemente nach der Höhe der Elternelemente ausrichten entsteht ein Teufelskreis. Natürlich würde es manchmal funktionieren, z.B. bei relativer Positionierung, oder einer festen Höhe des Elternelements, aber generell funktioniert das eben nicht und deshalb wurde so ein Verhalten nicht in den Standard aufgenommen.

Des halb ist es ja auch nicht möglich, ein Kindelement immer genauso so hoch zu machen, wie das Elternelement (außer bei festen größenangaben natürlich), wodurch dann flexible, mehrspaltige Layouts mit identischen Spaltenhöhen mit normalem CSS ziemlich unmöglich sind.

Jonathan

[Timo "God's Boss" Reitz]

Nicht. Das Problem ist im allgemeinen, dass sich ja die Höhe des Elternelementes nach der Höhe der Kindelemente richtet. Und wenn sich jetzt auch noch die Kindelemente nach der Höhe der Elternelemente ausrichten entsteht ein Teufelskreis. Natürlich würde es manchmal funktionieren, z.B. bei relativer Positionierung, oder einer festen Höhe des Elternelements, aber generell funktioniert das eben nicht und deshalb wurde so ein Verhalten nicht in den Standard aufgenommen.

Es geht hier nicht um die http://de.selfhtml.org/css/eigenschaften/positionierung.htm#height@title=Höhe, sondern um einen http://de.selfhtml.org/css/eigenschaften/randabstand.htm@title=Außenabstand! Das Lustige ist, dass das Verhalten bei der Höhe genauso ist, wie man annehmen könnte - gibt man 50% an, wird die Hälfte der Höhe genommen. Also ist das Verhalten sehr wohl genauso im Standard. Nur eben nicht bei margin, da wird stattdessen die Breite genommen.
Christian hat ja auch ein Beispiel mit fester Höhe des Elternelements geliefert. Und wenn man in seinem Test margin durch height ersetzt, sieht man auch, dass die Höhe tatsächlich aus der Höhe des Elternelements berechnet wird.