填充百分比如何工作？答案

【问题标题】：How does padding percentage work?填充百分比如何工作？
【发布时间】：2013-10-23 16:14:05
【问题描述】：

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。怎么回事？

【问题讨论】：

显然它被计算为.elementContainer padding-top: 50%
...是的，这就是我写的。
我认为您可能误读了文档。文档指出百分比基于“包含块”，而不是包含块的父级。
在这种情况下，它应该只是100px，因为包含块是200px tall。
好的，文档还指出它基于 width，在您的情况下，.wrapper 中的宽度为 400@ 请参阅developer.mozilla.org/en-US/docs/Web/CSS/padding-top

标签： html css

【解决方案1】：

The specifications解释原因。

<percentage>
百分比是相对于生成框的包含块的宽度计算的

400 的 50% 是 200。

【讨论】：