因为图片是行内元素,默认的图片对齐方式为vertical-align:baseline 基线对齐。baseline对其方式导致图片并不是与div的真实底部对齐,而是与文基线对齐。文基线就是字母x的下边缘,即使没有文字,也会有空隙
解决方法·一
将图片父元素字体大小设置为0
font-size:0;
解决方法二
将图片设置为块级元素
display: block;
因为图片是行内元素,默认的图片对齐方式为vertical-align:baseline 基线对齐。baseline对其方式导致图片并不是与div的真实底部对齐,而是与文基线对齐。文基线就是字母x的下边缘,即使没有文字,也会有空隙
解决方法·一
将图片父元素字体大小设置为0
font-size:0;
解决方法二
将图片设置为块级元素
display: block;