去除img标签图片底部空白

<div style="background-color: lightgray;margin: 0;padding: 0;">

<img src="test.jpg">

</div>

以上代码的结果如下图：

图片下面出现留白（div的背景），那么如何去掉空白呢？

产生空白的原因：

因为图片的display属性默认是inline，vertical-align属性的默认值是baseline。所以图片底部出现留白区域。

常用解决方法：

方法①：把img变成块级元素

img { display:block; }

方法②：设置img中的vertical-align属性值为middle

img { vertical-align:middle; }

方法③：将img的父元素的行高设置为0（以上代码的父元素为div）

div { line-height:0; }