!
也想出现在这里? 联系我们
广告位

DIV标签里面IMG图片下方留有空白怎么办

我们很多个人博客网站都会广告位投放一些图片广告,在网页设计中,图片是不可缺少的素材,但是在 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 属性,如下方代码

  1. img {display:block;}

2、设置图片的垂直对齐方式

即设置图片的 vertical-align 属性为“top,text-top,bottom,text-bottom”也可以去掉下边空白。比如下面的代码,也可去除图片下方的空白像素

  1. img{vertical-align:top;}

3、改变父对象的宽和高的属性

如果父对象的宽、高固定,图片大小随父对象而定,那么可以添加以下的一个属性来去掉图片下面的空间像素,来段示例代码,类 divimg 为图片父元素的类名:

  1. .divimg{width:88px;height:31px;overflow:hidden; }

4、为图片设置浮动属性去掉空白

示例代码如下(此方法适合在图文混排的文章中使用):

  1. img {float:left;}

5、设置父对象的文字大小为 0px

CSS 示例代码(这里的 divimg 为图片父元素的类名):

  1. .divimg{font-size:0;}

这个方法不推荐,如果图片的父元素中没有文本内容还好说,但如果含有文本内容的话,会造成布局混乱。

6、取消图片标签和其父对象的最后一个结束标签之间的空格

这个方法要强调下,在实际开发中该方法可能会出乱子,因为在写代码的时候为了让代码更体现语义和层次清晰,难免要通过 IDE 提供代码缩进显示,这必然会让标签和其他标签换行显示,比如说 DW 的“套用源格式”命令。所以说这个方法可以供我们了解出现 BUG 的一种情况。

总结

上面,给出了六个解决 HTML 中 DIV 标签中含有图片,图片下方出现空白像素的问题的解决方法,在这里我推荐第一种为每个图片设置 display:block 的方法,具体解决方案的还得各位见招拆招了。

给TA打赏
共{{data.count}}人
人已打赏
前端学习

利用:hover伪类实现鼠标指向区块滑出小提示效果

2024-9-23 11:45:49

前端学习

CSS样式表属性最佳书写顺序是怎样的?

2024-9-25 11:45:41

下载说明

  • 1、微码盒所提供的压缩包若无特别说明,解压密码均为weimahe.com
  • 2、下载后文件若为压缩包格式,请安装7Z软件或者其它压缩软件进行解压;
  • 3、文件比较大的时候,建议使用下载工具进行下载,浏览器下载有时候会自动中断,导致下载错误;
  • 4、资源可能会由于内容问题被和谐,导致下载链接不可用,遇到此问题,请到文章页面进行反馈,以便微码盒及时进行更新;
  • 5、其他下载问题请自行搜索教程,这里不一一讲解。

站长声明

本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有;若为付费资源,请在下载后24小时之内自觉删除;若作商业用途,请到原网站购买;由于未及时购买和付费发生的侵权行为,与本站无关。本站发布的内容若侵犯到您的权益,请联系本站删除,我们将及时处理!
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索