如何解决div里面img图片下方有空白的问题？（实用、赞）

原文出处：https://jingyan.baidu.com/article/7082dc1c69dc6fe40a89bdfe.html

相信网站前端开发者可能会遇到这样的问题，<div><img src="picture.png"/></div>这样的格式在html5的文档标准下会有一段空白区域，那么怎样去掉这部分空白区域呢？

方法/步骤

 

1、首先我们要知道这部分空白产生的原因。图片默认的vertical-align是baseline，

也就是字母x的下边距，我们在图片后面写上x就是这样

2、如果给x加上背景色就是这样

3、可以看到图片是与字母x的下边距对齐的，也就是baseline，css2的文档中有这么一句解释，翻译过来也就是一个inline-block元素，如果里面没有inline元素，或者overflow不是visible，则该元素的基线就是其margin底边缘，否则，其基线就是元素里面最后一行内联元素的基线。

4、所以我们只需要将img图片display:block，即可去掉div和img之间的空白

5、或者将div的line-height设置得足够小，也可以去掉空白，例如div{line-height:5px;}

6、也可以将font-size设为0，实际上也是改变了line-height

7、当然，我们可以改变vertical-align，让它不是baseline，比如设置vertical-align:middle

8、css博大精深，大家一起加油探索吧！

【个人总结】

1、要么改变div的对齐方式vertical-align;
2、要么改小div的line-height，让图片将div撑高；