在做网页前端开发，使用div+css排版时，浏览器中的图片元素img下出现多余空白的问题是很常见了，将padding,margin都设为0也没有任何效果，这对于前端小白刚开始是很懵逼的。这里介绍几种解决image图片布局下边的多余空隙BUG的常用方法，供大家参考。

方法1：将图片转换为块级对像

即，设置img为 display: block，即：

#box img { display: block; }

方法2：设置图片的垂直对齐方式

设置图片的 vertical-align 属性为「top，text-top，bottom，text-bottom」也可以解决。

#box img { vertical-align: top; }

方法3：设置父对象的文字大小为0px

设置 #box font-size 样式。

#box { font-size: 0; }

这种方式虽然可以解决问题，但会引发了新的问题，在父对像中的文字都无法显示。另外，父对象文字部分被子对像括起来，设置子对像文字大小虽然可以显示，但在CSS效验的时候会提示文字过小的错误。

方法4：改变父对象的属性

如果父对象的宽、高固定，图片大小随父对像而定，可以设置 overflow:hidden来解决。

#box { width: 100px; height: 50px; overflow: hidden; }

方法5：设置图片的浮动属性

#box img { float: left; }

如果要实现图文混排，这种方法是很好的选择。

方法6：删除图片标签和其父对象的最一个结束标签之间的空格

这个方法不推荐使用，因为在实际开发中为了让代码更体现语义和层次清晰，通常会使用IDE提供代码缩进功能，导致标签和其他标签换行显示，最终bug解决失败。