CSS 去除图片元素底部的空白

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

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.

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.

---

常用值	作用描述
baseline	默认值。元素放置在父元素的基线上。
bottom	将元素及其后代的底部与整行的底部对齐
text-bottom	元素的底端与父元素字体的底端对齐。
middle	元素放置在父元素的中部。
top	将元素及其后代的顶部与整行的顶部对齐
text-top	将元素的顶部与父元素的字体的顶部对齐。

其他更多参数请参考:
https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align
CSS 去除图片元素底的空白