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

• • 腾讯云建站教程
  • 宝塔面板建站教程
  • 老薛主机建站教程
  • SiteGround建站教程

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

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

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

至于 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 图片下方没有空白后四边都一样宽

本文地址：https://boke112.com/post/6870.html