CSS 去除图片元素底的空白

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

查看实例：Example on codepen

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