This “problem” persists because it’s not a bug. It’s just how the inline-formatting context works.

minuo.me

DIV+CSS排版时图片标签<img src="#">底部会出现空白,解决方法有很多,在此记录我常用的2个。

No.1 img {display: block;}
No.2 img {vertical-align: text-bottom[bottom,middle,top ... ];}

方法二在父元素也是inline元素的时候会影响到父元素的位置,所以我选择了方法代码少的方法一。

接下来,了解一下图片元素底部会出现空白的原因。

You’re seeing the space for descenders (the bits that hang off the bottom of ‘y’ and ‘p’) because img is an inline element by default.

robertc

CSS对inline 元素vertical-align属性有不同的规范值,用来设置元素的垂直对齐方式(所有浏览器都支持 vertical-align 属性)。

Note that vertical-align only applies to inline and table-cell elements: you can’t use it to vertically align block-level elements.

https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align
常用值作用描述
baseline默认值。元素放置在父元素的基线上。
bottom将元素及其后代的底部与整行的底部对齐
text-bottom元素的底端与父元素字体的底端对齐。
middle元素放置在父元素的中部。
top将元素及其后代的顶部与整行的顶部对齐
text-top将元素的顶部与父元素的字体的顶部对齐。

查看实例:Example on codepen

其他更多参数请参考(https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align