HTML幽灵空白

什么是幽灵空白：在HTML中的一个元素是行内块时，会出现一个空白间距的情况，如下图所示，由于白色不明显我们这里用蓝色来代替白色背景。

这个幽灵空白看起来令人很难受，我们也通常不需要这个幽灵空白，他会使页面的整体变高破坏原来的结构，所以接下来我们要解决这个问题。

思路：
幽灵空白只存在于行内块，所以只要该元素不是行内块就不会存在这种情况。

解决方案：

1. 改变显示方式
2. 设置字体大小

img{
    /*将行内块元素改为块级元素*/
    display:block;
    /*字体大小设置为0*/
    font-size:0;
}

这里的方法任选其一就行，我推荐用font-size解决幽灵空白，因为它不会改变元素默认自带的样式特性同时影响性也更小。