<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; }