关于iFrame高度小于父元素DIv3~5px的解决方案

最近在使用iframe时候遇到一个不大不小的问题：用一个div包裹一个iframe，但无论如何，div的高度都比iframe高了4px。百思不得其解，后来在网上多方查找，才发现问题的根源所在。

那么究竟是什么问题导致了这个情况的发生呢？没错，就是应为它；请看！

当然有问题就要解决，解决的具体方案就是给iframe添加属性：vertical-align:bottom;或者display:block; 

原理就是：

vertical-align:bottom;表示把元素的顶端与行中最低的元素的顶端对齐。即是以元素底线作为与父元素垂直对齐的基线。

display:block;表示将元素转换为块级元素。iframe本身是一个内联框架，他本身是从div中分出了一部分空间，作为自己的空间，而将其转换为块级对象时，他就会自己从新的一行开始显示内容，而不依赖于div。

转载于:https://juejin.im/post/5ad071516fb9a028d701056b