专栏首页网页开发/美化IMG图片下面出现下边距的解决办法

IMG图片下面出现下边距的解决办法

在不同浏览器下图片下面会出现莫名的下边距,经测算在FF中 下边距大概是多出了3像素左右,而IE6更多,在IE8中展示却是完好的,以往的做法只需要将img定义为块状级就解决了问题;

但其原理是:图片底部的空隙实际上涉及行内元素的布局模型,图片默认的垂直对齐方式是基线,而基线的位置是与字体相关 的。所以在某些时候,图片底部的空隙可能是 2px,而有时可能是 4px 或更多。不同的 font-size 应该也会影响到这个空隙的大小。

如果将图片的垂直对齐方式设置为 top 或 bottom,我们会发现这个空隙也会消失。

行内元素的格式化实际上比我们想像的要复杂得多,这也是我至今不愿面对的一个知识点。还好它并不常用。

ps: 解决办法给img定义vertical-align或者定义为块状,最优的解决办是定义vertical-align,注:定义vertical- align为middle时在IE6中大概还有一像素的顶边距,最好为top或bottom。当然还有种极端解决办法大家可以试试就是将 父容器的字体大小为零,font-size:0。

解决方法:

1.将img块状化 ul li img{display:block;}

2.将img左浮动 ul li img{float:left;}

3.为img添加样式 ul li img{vertical-align:top|bottom|text-top|text-bottom;}

4.为img的父级加高度 ul li{height:120px;}

5.为img的父级加样式 ul li{font-size:0;}

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • AntUI文字书写范例(util/writing)

    爱知汇
  • AntUI卡片Cards

    爱知汇
  • html+js开发模拟考试在线评分系统

    爱知汇
  • 图解 Elasticsearch 原理

    先自上而下,后自底向上的介绍ElasticSearch的底层工作原理,试图回答以下问题:

    芋道源码
  • CV基础教程:图像上的几何变换

    deephub
  • 直方图均衡的一些变体算法

    上上上上周,数字图片处理课程布置了一个作业,需要看论文实现并比较各种直方图均衡的算法:

    caoqi95
  • CSS3实现图片放大旋转

    py3study
  • python 给图像添加透明度(alpha通道)

    我们常见的RGB图像通常只有R、G、B三个通道,在图像处理的过程中会遇到往往需要向图像中添加透明度信息,如公司logo的设计,其输出图像文件就需要添加透明度,即...

    砸漏
  • matlab图像解密

    最近我一直在准备神经网络方面的推送。但是一直有人问我:以前发过一个关于图像加密的代码,一直没有等到解密的代码出来。该怎么解密。

    matlab爱好者
  • 【深度学习系列】用PaddlePaddle进行车牌识别(一)

    小伙伴们,终于到了实战部分了!今天给大家带来的项目是用PaddlePaddle进行车牌识别。车牌识别其实属于比较常见的图像识别的项目了,目前也属于比较成熟的应...

    Charlotte77

扫码关注云+社区

领取腾讯云代金券