DIV标签内的img图片下方有空白怎么办?CSS解决

爱折腾的星云 38 0
OUIMS博客广告

我们很多个人博客网站都会广告位投放一些图片广告,boke112 导航也不例外。由于广告位平时背景色是白色,所以从未关注过图片广告下方有空白。刚才试着改变广告位背景色为红色后才发现广告位内的 img 图片下方有空白,具体见下图:

下方明显比其他三边要宽很多

经过检查广告位的 CSS 代码没有发现什么问题,后来网络学习一番之后才知道这个问题在 2011 年就有人整理了相关解决办法(详见:DIV+CSS 排版时 如何解决 img 图片元素下多余空白)。尽信书不如无书,既然OUIMD博客遇到这个问题,那也实际测试一番吧。

至于 DIV 标签内的 img 图片下方有空白的原因,boke112 导航倒是没有深入学习,好像大概是说图片 display 属性默认是 inline,vertical-align 属性默认是 baseline 的原因所以才会有空白。

其实原因什么不重要,重要的是解决办法。经过 boke112 导航用本站来测试,想要去除 DIV 标签内的 img 图片下方的空白,以下三种方法比较好,所以特别推荐给大家。

方法一:为 img 添加 float 属性 left

.abc-site img {float: left;}

其中.abc-site 就是 img 图片外面 div 的 class 属性,替换成自己站点对应的 class 属性即可。

方法二:为 img 添加 display 属性 block

.abc-site img {display: block;}

其中.abc-site 就是 img 图片外面 div 的 class 属性,替换成自己站点对应的 class 属性即可。

方法三:为 img 添加 vertical-align 属性 middle

.abc-site img {vertical-align: middle;}

其中.abc-site 就是 img 图片外面 div 的 class 属性,替换成自己站点对应的 class 属性即可。

以上三种方法都可以去除 img 下方的空白,目前 Boke112 导航选择方法三,为广告位内的 img 添加了 vertical-align: middle;属性,最终去除了广告位内 img 图片下方的空白。具体见下图:

img 图片下方没有空白后四边都一样宽

标签: 精品教程 代码教程

OUIMS博客广告

发表评论 (已有0条评论)

还木有评论哦,快来抢沙发吧~