如何去除iframe底部的额外CSS间距？

这个问题我之前处理视频嵌入场景时也碰到过！iframe底部的额外空隙通常是因为它默认是行内块级元素，浏览器会把它和文本基线对齐，从而留出一小段多余空间。结合你这个视频高度可变的需求，给你几个实用的解决办法：

• 方法一：将iframe设为块级元素（最推荐）
  直接修改iframe的CSS，添加display: block;就能彻底消除基线对齐带来的空隙，而且完全不影响视频高度的自适应：

  iframe#resourceobject {
    max-height: 515px !important;
    height: -webkit-fill-available!important;
    display: block; /* 新增该行 */
  }
  

• 方法二：强制设置垂直对齐方式
  如果不想改变iframe的显示类型，可以给它设置vertical-align: bottom;，让它和容器底部对齐，同样能去掉底部空隙：

  iframe#resourceobject {
    max-height: 515px !important;
    height: -webkit-fill-available!important;
    vertical-align: bottom; /* 新增该行 */
  }
  

• 方法三：调整父容器字体大小（备选）
  极少数情况下，父容器的默认字体大小会间接导致行内块元素的空隙。如果上面两个方法无效，可以给iframe的父元素添加font-size: 0;，不过要注意给下方的div#urlintro重新设置字体大小，避免继承这个0值导致文本消失。

另外你给div#urlintro设置的margin-top: 10px可以保留，解决iframe的空隙后，这个margin就能正常控制它和iframe之间的间距了。

内容的提问来源于stack exchange，提问作者Kevin Davis