div中img下有空白

开发的时候直接在div中嵌套img标签

<div>
  <img src="xxx" />
</div>

不设置任何样式的时候，图片下总会有一截空白。

原因是：

img标签是inline元素，且默认vertical-align: baseline

解决办法：

1. 改变img元素形式

推荐：使用该形式不受其他属性影响

img {
   display: block;
}

2. 改变其默认布局

注意：该方式会收到字体的影响。图片位置会随着字体的大小变化。如果图片使用位置的字体大小一致，则该方法可行。

img {
    vertical-align: middle
}