图片底部间隙解决方案

img底部间隙问题

给图片的外层容器加边框可以看到图片下方有空隙：

之前写样式时遇到过这样的情况，一直用display:block;解决的。今天来探究其所以然：

原因：简单的说，行内元素默认的垂直对齐（vertical-align）方式为基线对齐（baseline），是以x字母的下方为基准。部分字体超过基线下方，造成的图片下方会有间隙。

解决方案：

1、修改img行内元素的垂直居中方式，让它不在以基线对齐。

2、修改行高，使行高变小，这样基线下方的位置基本可以忽略。

3、修改img行内元素的字体大小为0，基线的下方间隙是部分字体超过基线下方而产生的，如果把父元素的font-size变成0，基线的下方距离将忽略不计。

4、让img变成块级元素，不在受行内基线的影响。

具体如下：

img {
    //1  
    vertical-align: bottom;
    
}

div {
    //2
    line-height: 0px;
    //3
    font-size: 0px;
}

//4
img {
    display: block;
}

/* 浮动也可以让元素变成块级 */
img {
    float：left;
}

/* 任何能变成块级的属性都可以 */
...

float和position:absolute也会将元素转成块级元素。relative不会。