为什么Codepen嵌入<div>计算的高度比子iframe高？我该如何更正？

Question

我正在使用带有指定data-height="600" px。

的codepen html嵌入代码

这是a link！

Debug view

Codepen正在用：

替换后备<p>

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

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

1. 为什么？

2. 如何覆盖？

Answer 1

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

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