如何移除iframe多余布局样式？附现有实现代码

问题复现 #

尝试将iframe插入到div容器中，代码如下：

<div class="divIframe">
     <iframe src="~/Home/iframeView" width="100%" height="900px"></iframe>
</div>

配套使用的CSS样式如下：

.divIframe{
    overflow: hidden;
}

iframe{
    position: relative;
    border: 0;
    width: 100%;
}

已为iframe添加frameBorder="0"属性，但iframe内仍然存在多余布局：

• 索引页实际效果：
  
• iframe自身单独打开的页面效果：
  
  图中红色标记部分即为多余布局，预期实现效果如下：
  

解决步骤 #

多余布局的来源分两部分：一是iframe作为行内替换元素自带的底部基线间隙，二是iframe加载的内部页面默认带浏览器预置的body边距，按以下步骤调整即可完全消除：

1. 修正外层容器与iframe的基础样式
   给iframe设置块级显示属性，消除行内元素默认的底部空隙，同时关闭iframe自带滚动条避免占位：

   .divIframe{
       overflow: hidden;
       line-height: 0;
   }
   
   iframe{
       display: block;
       position: relative;
       border: 0;
       width: 100%;
       height: 900px;
   }
   

   同步给iframe标签补充scrolling="no"属性，修改后标签代码：

   <div class="divIframe">
       <iframe src="~/Home/iframeView" frameborder="0" scrolling="no" width="100%" height="900px"></iframe>
   </div>
   

2. 清除iframe内部页面的默认边距
   截图中红色标记的外围空白，本质是浏览器默认给页面body、html标签添加的8px外边距，在iframe加载的iframeView页面中添加全局重置样式即可：

   html, body {
       margin: 0;
       padding: 0;
       width: 100%;
       height: 100%;
   }
   

如果遇到跨域场景无法修改iframe内部页面样式，可以给iframe设置负外边距margin: -8px;，配合外层容器的overflow: hidden属性裁掉多余的默认边距即可。

内容的提问来源于stack exchange，提问作者Bilbit Bolson