填充百分比如何工作？

Question

HTML

<div class='wrapper'> 
    <div class='elementContainer'> 
     This line should start halfway down the yellow box 
    </div> 
</div> 

CSS

.wrapper 
{ 
    position: relative; 

    height: 300px; 
    width: 400px; 

    background: lightyellow; 
    border: 1px solid black; 
} 

.elementContainer 
{ 
    position: relative; 
    height: 200px; 
    width: 300px; 

    padding-top: 50%; 

    background: red; 
} 

小提琴例如：http://jsfiddle.net/jakelauer/s2ZXV/

在上面的例子，.elementContainer具有50%填充頂部。這應該根據父元素的高度（.wrapper）計算，這意味着它應該出現在150px。相反，它出現在200px。這是怎麼回事？

Answer 1

The specifications解釋了原因。

<percentage>
百分比相對於計算所生成的框的包含塊的寬度

400 50％200