我们很多个人博客网站都会广告位投放一些图片广告,在网页设计中,图片是不可缺少的素材,但是在 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 的方法,具体解决方案的还得各位见招拆招了。