HTML5清除2个div标签的空白,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 属性,如下方代码

img {display:block;}

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

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

img{vertical-align:top;}

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

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

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

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

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

img {float:left;}

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

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

.divimg{font-size:0;}

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

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

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

总结

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/507624.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

python notebook软件_Jupyter notebook快速入门教程(推荐)

本文主要介绍了Jupyter notebook快速入门教程,分享给大家,具体如下:本篇将给大家介绍一款超级好用的工具:Jupyter notebook。为什么要介绍这款工具呢?如果你想使用Python学习数据分析或数据挖掘,那么它应该…

推荐系统国内外团队介绍

1 何向南团队 http://staff.ustc.edu.cn/~hexn/

如何用计算机截部分屏,电脑如何长屏幕的截图?电脑截取长屏的方法

新手用户对windows系统截取长屏的方法比较陌生,正常情况下,我们截取屏幕内容是登录QQ,按ctrlalta来截取屏幕的,只能截取部分内容,无法截图整个页面。日常的工作生活中,截图是经常会用到的,如果你…

Audio-based snore detection using deep neural networks解读

0 摘要 Background and Objective: 打鼾是一种普遍现象。 它可能是良性的,但也可能是阻塞性睡眠呼吸暂停 (OSA) 一种普遍存在的睡眠障碍的症状。 准确检测打鼾可能有助于筛查和诊断 OSA。 Methods: 我们介绍了一种基于卷积神经网络 (CNN) 和循环神经网络 (RNN) 组合…

python实战讲解_Python数据可视化实战讲解

前言本文的文字及图片来源于网络,仅供学习、交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理。开运张 | 作者知乎专栏 | 来源三个步骤:确定问题,选择图形转换数据,应用函数参数设置,一目了然首先对…

2018计算机专业考研报名人数,2018年全国考研报考人数、各省市考研报考人数、历年考研录取率、全日制及非全日制硕士研究生比例及考研动机分析【图】...

一、考研报考人数、录取率及报录比分析从上世纪末开始,研究生和本科生招生数量一样在逐步增多。本科扩招的同时,研究生也在扩招。1999年,全国报考研究生人数31.9万,录取人数7.3万,录取率22.8%。2008年,报考…

标记分布学习与标记增强

1 标记增强 标记增强是指将训练样本中的原始逻辑标记转化为标记分布的过程. 与基于嵌入 (embedding) 的 多标记分类方法相似, 标记增强也同样依赖于对隐含在训练样本中的标记相关信息的挖掘.

学python开发必须要会wsgi么_python Web开发你要理解的WSGI uwsgi详解

WSGI协议首先弄清下面几个概念:WSGI:全称是Web Server Gateway Interface,WSGI不是服务器,python模块,框架,API或者任何软件,只是一种规范,描述web server如何与web application通信…

用计算机怎样搜wifi网,笔记本电脑搜索不到无线网络(Wifi)怎么办

在使用Windows 10工作时会遇到形形色色的问题,比如笔记本电脑搜索不到无线网络。那么如何排除故障呢?下面小编与你分享具体步骤和方法。工具/材料Windows 10操作系统操作方法第1:启动Windows 10操作系统,如图所示。点击任务栏&quo…

如何理解矩阵对矩阵求导?

给一种不严密但有用的理解方式: 1 向量的“倒数” 记向量x(x1,x2,…,xn)T\mathrm{x} (x_1, x_2, \dots, x_n)^Tx(x1​,x2​,…,xn​)T,其倒数记为:x−1(1x1,1x2,…,1xn)T\mathrm{x}^{-1} (\frac{1}{x_1}, \frac{1}{x_2}, \dots, \frac{1}…

python获取id标签对应数据_Python--Scrapy爬虫获取简书作者ID的全部文章列表数据

最近Python大火,为了跟上时代,试着自学了下。Scrapy是一个高级的Python爬虫框架,它不仅包含了爬虫的特性,还可以方便的将爬虫数据保存到csv、json等文件中。今天我们就试着用Scrapy来爬取简书某位作者的全部文章。在本篇教程中,我们假定您已经…

怎么用计算机杀毒,电脑怎样查杀病毒

病毒往往会利用计算机操作系统的弱点进行传播,那么大家知道电脑怎样查杀病毒吗?接下来大家跟着学习啦小编一起来了解一下电脑查杀病毒的解决方法吧。电脑查杀病毒方法一一、使用杀毒软件进行杀毒1、首先进入“安全模式”2、进入方法:开机在进入Windows系…

MSN-LDL论文修改(B-Y Rong20211012)

Multi-view label distributed learning with multiple sub-networks –> Multi-view label distribution learning with multiple sub-networks Zhang HengRu1[00000 11111 22222 3333], Rong –> Bin-Yuan Rong, Heng-Ru Zhang Label distribution learning is an em…

将文件中所有数读到一个数组中_「数据结构与算法」将5个文件中的一千万年龄合并到一个新文件中...

现在有5个文件,文件里面分别存储着1千万个用户年龄,并且每个文件中的年龄都是有序的(从小到大),现在需要将这5个文件整合到一个文件中,新文件的内容依然要保持有序(从小到大)。初始化…

成都理工大学工程技术学院计算机专业收分线,2019年成都理工大学工程技术学院美术类专业录取分数线...

四川:艺术本科省控线文化分370专业分200(单科成绩均不低于60分),录取最低专业分224;艺专省控线文化分140专业分160,录取最低专业分181。内蒙古:艺术本科省控线文化分279专业分199,录取最低专业分201&#x…

如何利用python语言实现对象数组

1 Java代码示例 //定义一个类 class Triple {int user;int item;double rating; &#xff5d;//声明对象数组 Triple[] dataset new Triple[20];//利用对象数组访问成员变量 for(int i 0; i < dataset.length; i ){dataset[i].user 0; dataset[i].item 0dataset[i].…

在python中、正确的函数定义格式为_Python函数的定义与实现

1. 函数的介绍函数是 实现具有特定功能的代码块Python中预制了许多内置函数&#xff0c;也可以根据自己的需求创建自定义的函数隐藏实现功能的细节代码的复用提高可读性&#xff0c;便与调试def 函数名(形参1, 形参2...):要运行的代码块(函数体)return 返回的数据(返回值)函数名…

计算机连接交换机配置命令,[计算机]交换机配置命令.doc

[计算机]交换机配置命令交换机配置命令集锦1、 进入全局配置模式1、Switch-3548 > enablePassword : ********Switch-3548 # config tSwitch-3548 (config) #2、 启用交换机的HTTP Server2、Switch-3548 (config) # ip http server3、 配置主机名3、Switch-3548 (config) # …

二维码编码规范解读

1 QR码符号的结构 QR 码符号的结构如下&#xff1a; 1.1 定位图案 Position Detection Pattern是定位图案&#xff0c;用于标记二维码的矩形大小。这三个定位图案有白边叫Separators for Postion Detection Patterns。之所以三个而不是四个意思就是三个就可以标识一个矩形了…

最早单机的计算机操作系统,川农《计算机操作系统(本科)》19年12月在线作业【满分答案】...

可做奥鹏全部院校作业论文&#xff01;答案请添加qq&#xff1a;599792222 或 微信&#xff1a;1095258436川农《计算机操作系统(本科)》19年12月在线作业【满分答案】试卷总分:100 得分:100一、单选题 (共 20 道试题,共 100 分)1.在单一处理机上执行程序&#xff0c;多道程序…