html - パディングのパーセンテージはどのように機能しますか?

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は、 の padding-top があり50%ます。.wrapperこれは、親要素の ( ) の高さに基づいて計算する必要があります。つまり、 になり150pxます。代わりに、 に出てき200pxます。どうしたの？

Answer 1

仕様はその理由を説明しています。

<percentage>
パーセンテージは、生成されたボックスの包含ブロックの幅 に対して計算されます

400 の 50% は 200 です。