【CSS】导致图片下方空白缝隙的原因

问题

图片和父元素之间会出现一条空白缝隙

元素的基线位置

一个line box，如果里面没有inline内联元素，或者overflow不是visible，则该元素的基线就是其margin底边缘，否则，其基线就是元素里面最后一行内联元素的基线

原因

line box中图片默认和文本基线对齐，如果使用基线对齐，该行内若有文字，文字的底线与基线之间有距离(leading/2)，此时文字就会顶起来一段距离

例如：

空隙高度，实际上是文字计算后的行高值和字体内容区域（content-area）下边缘的距离

修改方法

1. 使用其他vertical-align值：将vertical-align属性变为bottom，表示对底边齐父元素下行高边框

2. 让vertical-align失效：将img标签设置为display：block，vertical-align只能改变行内或行内块元素

3. 直接修改line-height值：空隙高度，实际上是文字计算后的行高值和字体内容区域（content-area）下边缘的距离，只要行高足够小，实际文字占据的高度小于字体内容区域（content-area），就不会出现空白空隙了
   

line-height为相对单位，font-size间接控制行高：当line-height是相对单位时，行高实际上就与font-size关联，例如line-height:1.6或者line-height:160%之类，此时降低font-size本质上还是改变line-height值.