Wenn Sie sich die CSS-Box-Modellspezifikation ansehen , werden Sie Folgendes beachten:
Der Prozentsatz [Rand] wird in Bezug auf die Breite des Blocks der generierten Box berechnet . Beachten Sie, dass dies auch für "Rand oben" und "Rand unten" gilt. Wenn die Breite des enthaltenen Blocks von diesem Element abhängt, ist das resultierende Layout in CSS 2.1 nicht definiert. (Hervorhebung von mir)
Das ist in der Tat wahr. Aber warum ? Was um alles in der Welt würde jemanden dazu zwingen, es so zu gestalten? Es ist leicht, sich Szenarien vorzustellen, in denen eine bestimmte Sache immer 25% vom oberen Rand der Seite entfernt sein soll, aber es ist schwierig, einen Grund zu finden, warum die vertikale Polsterung relativ zur horizontalen Größe von sein soll das Elternteil.
Hier ist ein Beispiel für das Phänomen, auf das ich mich beziehe:
<div style="border: 1px solid red; margin: 0; padding: 0; width: 200px; height: 800px;">
This div is 200x800.
<div style="border: 1px solid blue; margin: 10% 0 0 10%;">
This div has top-margin of 10% and left-margin of 10% with respect to its parent.
</div>
</div>
height: 10%; width: 10%
Sie auch kein quadratisches Element erhalten.
Note that in a horizontal flow, percentages on ‘margin-top’ and ‘margin-bottom’ are relative to the width of the containing block, not the height (and in vertical flow, ‘margin-left’ and ‘margin-right’ are relative to the height, not the width).
also, es geht in beide Richtungen
margin: 25%
tatsächlich bedeutet. Es wäre kein gleichmäßiger Spielraum, obwohl der Code dies nahelegt. Ich habe keine Beweise, um dies zu belegen, aber es scheint vernünftig.