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

 2019-06-11 23:16:21  62 人阅读  13 条评论
 最佳答案:

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

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

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

经过检查广告位的 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 图片下方的空白。具体见下图:

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

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

您可能感兴趣的文章

问题标签: ,  更多问题标签>>
编辑作者:懿古今(QQ号:2226524923,QQ邮箱:boke112@qq.com)
免责声明:本文内容来源于互联网,仅供参考学习之用,如有侵权请联系本站修改删除!
问题分类:WordPress问题 ,  建站/技术问题 ,  主机/服务器问题 ,  办公软件问题 ,  搜索热点问题 ,  综合其他问题
©boke112导航,本站推荐使用:阿里云 ECS服务器等云产品服务,国外免备案主机建议使用:老薛主机

 发表评论

强表情无奈表情抠鼻表情笑哭表情偷笑表情衰表情流汗表情奋斗表情吐血表情抓狂表情晕表情流泪表情疑问表情呲牙表情惊讶表情鼓掌表情

  1. 云上课堂
    云上课堂 @回复

    跟折腾主题相关的都整不来

  2. 辩论吧
    辩论吧 @回复

    技术性的文章,实用的可以多发

  3. 建造师挂靠
    建造师挂靠 @回复

    要是直接设置边框数值也是可行的。

  4. 明月登楼
    明月登楼 @回复

    不错,这个分享很赞!

  5. 杂烩网wwwzahuiwcom
    杂烩网wwwzahuiwcom @回复

    小细节,会的都懂,css调整

  6. 魏义齐个人博客
    魏义齐个人博客 @回复

    margin padding为零一般写在通配符里,图片下面有空白用到的也就是display: block; 特别是div里的图片是自适应时

  7. 留芳网
    留芳网 @回复

    感觉无所谓,不影响浏览就行了。

  8. MAY的SEO博客
    MAY的SEO博客 @回复

    img是行内元素,需要转为块级元素,加display: block;即可

  9. 张波博客
    张波博客 @回复

    这样一来是好看一点了。

  10. 黑鸟博客
    黑鸟博客 @回复

    折腾广告也可以学到很多布局的知识 ..

  11. jane博客
    jane博客 @回复

    把边框边距等元素都设为0

  12. WordPress建站吧
    WordPress建站吧 @回复

    所有元素 margin padding都为0呢