图片底部3px空隙问题：img下方空白缝隙产生的原因和去除方法

<div style="background: orange">
    <img src="pic.png"/>
</div>

原理：img是inline元素，垂直对齐方式vertical-align默认值是baseline，而baseline和底线之间有偏差，偏差视字体大小而定，例如字体的大小是12px，那么缝隙就是3px左右。

解决方法：

1. 将图片的垂直对齐方式vertical-align的值设置为bottom。
2. 将图片display设置为block，并且指定width和height。
3. 设置图片所在的容器元素和width和height与图片一样。