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

Question

我正在使用 codepen html 嵌入代码并指定 data-height="600"px。

这里是a link！

Debug view.

Codepen 正在将后备 <p> 替换为：

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

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

1. 为什么？

2. 如何覆盖它？

Answer 1

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

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