问题描述:
div里放了个图片,底部留白,用了padding:0,没去掉,记录一下。
原因分析:
img元素默认是inline元素,而inline元素的vertical-align属性的默认值为baseline,也就是文字基线对齐,所以图片底部的留白就是baseline和bottom之间的距离。
解决方案:
- 使用
display: block;
将img转换成block元素即可。 - 重写默认的
vertical-align: baseline;
,建议设置为vertical-align: middle;
- 设置图片的浮动或者定位属性,通过添加 float 或 position 属性来改变display属性,将图片隐式转换为块级元素。