为什么 Codepen 嵌入<div>计算高度比子 iframe 高？我该如何纠正此问题？

Question

我使用的是带有指定data-height="600" px的codepen html嵌入代码。

这里有一个链接！

调试视图。

Codepen正在将回退<p>替换为：

<div>
<iframe>
</iframe>
</div>

包装器<div>的高度计算为比<iframe>高4px。这在内容边缘和我可能应用的任何box-shadow之间创建了不需要的空白(此处为绿色(。

1. 为什么？

2. 我如何才能覆盖此项？

Answer 1

iframe是一个内联元素，当它显示在块内时，会在它下面为后代留下空间，因为iframe的底部与基线对齐。(这与img的行为相同(。

解决方案：将display:block或vertical-align:top添加到iframe的样式中。