CSS图片底部留白的解决办法

问题描述：

div里放了个图片，底部留白，用了padding:0，没去掉，记录一下。

原因分析：

img元素默认是inline元素，而inline元素的vertical-align属性的默认值为baseline，也就是文字基线对齐，所以图片底部的留白就是baseline和bottom之间的距离。

解决方案：

1. 使用display: block;将img转换成block元素即可。
2. 重写默认的vertical-align: baseline;，建议设置为vertical-align: middle;
3. 设置图片的浮动或者定位属性，通过添加 float 或 position 属性来改变display属性，将图片隐式转换为块级元素。