HTML5清除2个div标签的空白,DIV标签里面IMG图片下方留有空白怎么办

我们很多个人博客网站都会广告位投放一些图片广告，在网页设计中，图片是不可缺少的素材，但是在 div 标签里面放入 img 图片的话，有时候会在图片的下方出现一行空间的区域，如果单纯的图片不醒目或是图片所在的位置不重要的话，我们可以不去理会，但是做为一个完美型的页且不太会前端的我来说，出现这个问题是忍无可忍的，由于广告位平时背景色是白色，所以从未关注过图片广告下方有空白。刚才试着改变广告位背景色为红色后才发现广告位内的 img 图片下方有空白，具体见下图：

经过检查广告位的 CSS 代码没有发现什么问题，至于 DIV 标签内的 img 图片下方有空白的原因，倒是没有深入学习，好像大概是说图片 display 属性默认是 inline，vertical-align 属性默认是 baseline 的原因所以才会有空白。在 HTML5 与 CSS3 中，DIV 标签中的图片也就是 IMG 标签的默认 vertical-align 属性为 baseline，而这个 baseline 在 css2 的文档中有这么一句解释，翻译过来也就是一个 inline-block 元素，如果里面没有 inline 元素，或者 overflow 不是 visible，则该元素的基线就是其 margin 底边缘，否则，其基线就是元素里面最后一行内联元素的基线。其实原因什么不重要，重要的是解决办法。想要去除 DIV 标签内的 img 图片下方的空白，以下几种方法比较好，所以特别推荐给大家。

1、将图片转换为块级对象可去掉下边空白

给图片单独设置或添加一个 display 属性，如下方代码

img {display:block;}

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

即设置图片的 vertical-align 属性为“top，text-top，bottom，text-bottom”也可以去掉下边空白。比如下面的代码，也可去除图片下方的空白像素

img{vertical-align:top;}

3、改变父对象的宽和高的属性

如果父对象的宽、高固定，图片大小随父对象而定，那么可以添加以下的一个属性来去掉图片下面的空间像素，来段示例代码,类 divimg 为图片父元素的类名：

.divimg{width:88px;height:31px;overflow:hidden; }

4、为图片设置浮动属性去掉空白

示例代码如下(此方法适合在图文混排的文章中使用)：

img {float:left;}

5、设置父对象的文字大小为 0px

CSS 示例代码(这里的 divimg 为图片父元素的类名)：

.divimg{font-size:0;}

这个方法不推荐，如果图片的父元素中没有文本内容还好说，但如果含有文本内容的话，会造成布局混乱。

6、取消图片标签和其父对象的最后一个结束标签之间的空格

这个方法要强调下，在实际开发中该方法可能会出乱子，因为在写代码的时候为了让代码更体现语义和层次清晰，难免要通过 IDE 提供代码缩进显示，这必然会让标签和其他标签换行显示，比如说 DW 的“套用源格式”命令。所以说这个方法可以供我们了解出现 BUG 的一种情况。

总结

上面，给出了六个解决 HTML 中 DIV 标签中含有图片，图片下方出现空白像素的问题的解决方法，在这里我推荐第一种为每个图片设置 display:block 的方法，具体解决方案的还得各位见招拆招了。