Warum werden Rand- / Auffüllprozentsätze in CSS immer gegen die Breite berechnet?

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>

http://jsfiddle.net/8JDYD/

Übertragen Sie meinen Kommentar auf eine Antwort, weil es logisch sinnvoll ist. Bitte beachten Sie jedoch, dass dies eine unbegründete Vermutung ist. Die eigentliche Begründung, warum die Spezifikation so geschrieben ist, ist technisch noch unbekannt.

Die Elementhöhe wird durch die Größe der untergeordneten Elemente definiert. Wenn ein Element eine Auffüllspitze hat: 10% (relativ zur übergeordneten Höhe), wirkt sich dies auf die Höhe des übergeordneten Elements aus. Da die Größe des Kindes von der Größe des Elternteils abhängt und die Größe des Elternteils von der Größe des Kindes abhängt, haben wir entweder eine ungenaue Größe oder eine Endlosschleife. Sicher, dies betrifft nur den Fall, in dem Offset Parent === Parent ist, aber immer noch. Es ist ein seltsamer Fall, der schwer zu lösen ist.

Update: Die letzten paar Sätze sind möglicherweise nicht ganz korrekt. Die Höhe des Blattelements (Kind ohne Kinder) wirkt sich auf die Höhe aller darüber liegenden Elemente aus, sodass dies viele verschiedene Situationen betrifft.

Damit "n%" Rand (und Polsterung) gleich sind für margin-top / margin-rechts / margin-unten / links-Marge, die alle vier haben an derselben Basis relativ zu sein. Wenn oben / unten eine andere Basis als links / rechts verwendet würde, würde der Rand (und die Polsterung) "n%" nicht auf allen vier Seiten dasselbe bedeuten.

(Beachten Sie auch, dass der obere / untere Rand im Verhältnis zur Breite einen seltsamen CSS-Hack ermöglicht, mit dem Sie eine Box mit einem unveränderlichen Seitenverhältnis angeben können ... selbst wenn die Box neu skaliert wird.)

Ich stimme für die Antwort von @ChuckKollars, nachdem ich mit dieser JSFiddle (auf Chrome 46.0.2490.86) gespielt und auf diesen Beitrag (auf Chinesisch geschrieben) verwiesen habe .

Ein Hauptgrund gegen die Vermutung der unendlichen Berechnung ist folgender: Verwenden von widthGesichtern dieselbe unendliche Berechnung Problem .

Schauen Sie sich diese JSFiddle an , die parentAnzeige ist inline-block, die berechtigt ist, Rand / Abstand darauf zu definieren. Der childhat Margin-Wert 20%. Wenn wir der unendlichen Berechnungsvermutung folgen :

1. Die Breite der childhängt von derparent
2. Die Breite der parenthängt von derchild

Infolgedessen stoppt Chrome die Berechnung jedoch irgendwo, was Folgendes zur Folge hat:

Wenn Sie versuchen, das Bedienfeld "Ergebnis" auf der JSFiddle horizontal zu erweitern, werden Sie feststellen, dass sich die Breite nicht ändert. Bitte beachten Sie, dass der Inhalt childin zwei Zeilen (nicht beispielsweise eine Zeile) eingeschlossen ist. Warum? Ich denke, Chrome hat es einfach irgendwo hart codiert. Wenn Sie den childInhalt bearbeiten , um ihn zu verbessern ( JSFiddle ), werden Sie feststellen, dass Chrome den Inhalt zwei Zeilen lang behält, solange horizontal zusätzlicher Speicherplatz vorhanden ist.

Wir können also sehen: Es gibt eine Möglichkeit, die unendliche Berechnung zu verhindern .

Ich stimme der Vermutung zu, dass: bei diesem Entwurf nur die vier Rand- / Füllwerte auf der Grundlage des gleichen Maßes beibehalten werden sollen.

Dieser Beitrag (auf Chinesisch geschrieben) schlägt auch einen anderen Grund vor: Er liegt an der Ausrichtung des Lesens / Satzes. Wir lesen von oben nach unten, wobei die Breite fest und die Höhe unendlich (virtuell) ist.

Mir ist klar, dass das OP fragt, warum die CSS-Spezifikation Prozentsätze für den oberen / unteren Rand als% der Breite (und nicht, wie angenommen wird, der Höhe) definiert, aber ich dachte, es könnte auch nützlich sein, eine mögliche Lösung zu veröffentlichen.

Die meisten modernen Browser unterstützen jetzt vw und vh, mit denen Sie Randnummern für die Breite des Ansichtsfensters und die Höhe des Ansichtsfensters angeben können.

100vw / 100vh entsprechen 100% Breite / 100% Höhe, wenn keine Bildlaufleiste vorhanden ist. Wenn eine Bildlaufleiste vorhanden ist, berücksichtigen die Ansichtsfensternummern dies nicht (während die% -Nummern dies tun). Zum Glück verwenden fast alle Browser Bildlaufleistengrößen von 17 Pixel ( siehe hier ), sodass Sie die CSS-Berechnungsfunktion verwenden können, um dies zu berücksichtigen. Wenn Sie nicht wissen, ob eine Bildlaufleiste angezeigt wird oder nicht, funktioniert diese Lösung nicht.

Beispiel: Angenommen, keine horizontale Bildlaufleiste, ein oberer Rand von 50% der Höhe, könnte als "Rand oben: 50 vh;" definiert werden. Mit einer horizontalen Bildlaufleiste könnte dies definiert werden als "Rand oben: calc (0,5 * (100vh - 17px))"; (Denken Sie daran, dass die Minus- und Plusoperatoren in calc Leerzeichen auf beiden Seiten benötigen!).