解决img元素底部出现的空白

“留白”出现的原因

行内元素默认是和父级元素的baseline对齐的，而不是父级元素的bottom。baseline有时候和父级元素buttom有一段距离
也有另一种解释：
行内元素前后默认会有一个看不见的字符，这个空白其实是这个字符所占的位置。看不见的字符，看得见的影响

解决的方法

一：设置vertical-align；

    img {
        vertical-align: bottom;
    }

只要vertical-align的值是以上三个中任意的一个，就能解决缝隙的问题。
二：定义img的父容器的字体大小为0；

    div {
        font-size: 0;
    }

对应第二种解释
三：把图片设置为块级元素；

    img {
        display: block;
    }

作者：Thomson_Yang
链接：http://www.jianshu.com/p/872de252be9b
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。