我正在编写一段看起来像这样的代码：
<div style="position: relative;">
<span style="display: block;padding-top: 57%;"></span>
<iframe style=" position: absolute; top: 0; left: 0; width: 100%; height: 100%;" src="https://www.google.com"></iframe>
</div>
我不明白为什么span的padding-top会给出iframe高度。 这是jsfiddle
答案 0 :(得分：0)
因为padding-top中表达的padding-bottom和%值是包含块的宽度的百分比，而不是高度，如果上下文宽度是水平的。
它是提供宽高比的内置方法。
如W3C标准中所述：https://drafts.csswg.org/css-box-3/#padding-props。
同样，在具有垂直流向的上下文中，所有百分比填充属性都表示为包含块height的百分比，包括padding-right和padding-left。< / p>