如何确定基于百分比的填充？

Question

我从the spec知道基于百分比的填充使用其包含块来确定它们的宽度。

但是这个例子中的包含块是什么？

HTML：

<div id="outer">
    <div id="inner">&nbsp;</div>
</div>

样式：

* {
    box-sizing: border-box;
}

#outer {
    width: 100px;
}

#inner {
    width: 50%;
    padding: 5%;
}

#inner的填充是否计算为2.5px或5px？任何可以解释正在发生的事情的规范和/或外部资源的链接以及更详细的原因将非常感谢。

Answer 1

  

Box model - 8.4 Padding properties

     

百分比是根据生成的框的包含块的宽度计算的。

因此，#inner的填充将基于包含块，在这种情况下，它将是父元素#outer。

#inner的填充为5%。 （通过检查开发工具中的计算样式确认）

  

Visual formatting model - 9.1.2 Containing blocks

     

通常，生成的框用作包含后代框的块;我们说一个盒子“建立”其后代的包含块。短语“一个包含块的盒子”意味着“盒子所在的包含块”，而不是它所生成的那个块。

Answer 2

答案是肯定的。

来自MDN

  

“百分比是指包含块的宽度..”