CSS box model spec bakarsanız şu noktaya dikkat edin:

[Marj] yüzdesi açısından hesaplanırgenişlikoluşturulan çerçevenin taşıyıcı blokunun.Bunun için doğru olduğunu unutmayın 'margin-top' ve 'margin-bottom' de.Eğer içeren bloğun genişliği bu öğe değişir, daha sonra ortaya çıkan düzen CSS 2.1 tanımsızdır.(vurgu benim)

Bu gerçekten de doğrudur. Amaneden? Dünyadaki Herkesin bu şekilde tasarlanmış suçun ne olurdu? Kolay sanıyorsun senaryoları istediğiniz, örneğin belirli bir şey için her zaman yüzde 25'i gelen sayfanın üstüne, ama çok zor. ama olmaması için bir neden istiyorsunuz dikey doldurma için göreli yatay boyut üst.

İşte bahsettiğim olay bir örnek:

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

Mantıklı mantıklı çünkü bir cevap için benim yorum aktarılması. Ancak, lütfen bu asılsız bir varsayım olduğunu unutmayın. Spec bu şekilde yazılmış neden gerçek akıl yine de, teknik olarak bilinmemektedir.

Eleman yüksekliği yüksekliği ile tanımlanır çocuklar. Eğer bir öğe doldurma-top: 10% (bağıl üst üst bölümlerine gidiyor. yükseklik) Yana çocuğun yüksekliği üst ve yüksekliğine bağlıdır üst yüksekliği çocuğun boyuna, bakarız bağlıdır ya yanlış yükseklik veya sonsuz bir döngü var. Tabii, bu sadece üst === üst ofset durumda etkiler, ama yine de. Bir şey garip bir durum olduğunu çözmek zor.

Güncelleme: son bir kaç cümle tamamen doğru olmayabilir. Yaprak elemanı (çocuklarla) yüksekliği üstündeki tüm öğeleri yüksekliği üzerinde bir etkisi var, bu birçok farklı durumlarda etkiler.