行内元素的细小留白

现象

根据如下Demo,你可以清楚的看到上面的图片跟下面的文字有着明显的间隔。

产生原因

img属于行内块元素，div中的img的vertical-align默认属性是baseline。

图 1

文本与图片的垂直对齐基线的位置并不是相同的：

在文本中，基线是字符的下边缘。字符的下边缘和字符元素的底边是有一定的距离的（也就是行高）。
在图片中，基线就是图片的下边缘。

所以其实可以看到图片的底边是和字符的底边对齐的，这才导致了图片底部产生间隙。

解决办法

基于以上的原理，我们可以推导出解决办法：让字符的底边和图片的底边垂直对齐，就可以解决图片底部间隙的问题了。

1. 将img标签设置为块级元素

   img {
       display: block;
   }

2. 设置图片的垂直对齐方式

   img {
       vertical-align: top/text-top/middle/bottom/text-bottom
   }

3. 改变父元素的宽和高属性
   如果父对象的宽、高固定，图片大小随父对象而定，那么可以添加以下的一个属性来去掉图片下面的空间像素：

   div {
       width: 100px;
       height: 300px;
       overflow: hidden;
   }

4. 为img设置浮动

   img {
       float: left;
   }

5. 为父元素设置font-size: 0

   div {
       font-size: 0;
   }

6. 为父元素设置line-height: 0

   div {
       line-height: 0;
   }