两个inline-block元素靠近为什么有间隙?

2024-02-06 09:30

本文主要是介绍两个inline-block元素靠近为什么有间隙?,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

前言
相信行内块元素,也就是display:inline-block的元素大家并不少见,不知道大家有没有发现一个问题,就是当两个行内块元素在同一行并排时,它们之间会存在着间距。下面让我们一起来看看这个问题吧

一、问题描述
废话不多说,上图

在这里插入图片描述

代码:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box1{display: inline-block;width: 100px;height: 100px;background: pink;}.box2{display: inline-block;width: 100px;height: 100px;background: greenyellow;}</style>
</head>
<body><div class="box1">111</div><div class="box2">111</div>
</body>
</html>
复制代码

大家可以发现,我是没有设置任何间距属性的,但是它依然存在了间距。

问题原因:元素被当成行内元素排版的时候,元素之间的空白符(空格、回车换行等)都会被浏览器处理,根据white-space的处理方式(默认是normal,合并多余空白),原来HTML代码中的回车换行被转成一个空白符,所以元素之间就出现了空隙。这些元素之间的间距会随着不同环境而变化(字族、字体大小、white-space都会影响)。

可能你会问:那么block元素和inline会有这样的效果吗?

在这里插入图片描述

我们可以看到两个inline元素在一起也是有间隙的,造成这一切的源头就是white-space

大家不禁会好奇,white-space是个什么东西呢?为什么会造成这样的效果,我们看看mdn的文档。

在这里插入图片描述

可以看到说是用来处理元素中的空白的,这就不难解释为什么会出现间隙。

我们看一看具体的参数

在这里插入图片描述

具体效果就不展示啦,大家有兴趣的话可以去自己试一试,下面让我们进入正题,该怎么解决这个问题呢?

二、解决方式
1.使用浮动
我们可以通过给子元素添加浮动来达到消除间距的效果。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box1{display: inline-block;width: 100px;height: 100px;background: pink;float: left;}.box2{display: inline-block;width: 100px;height: 100px;background: greenyellow;}</style>
</head>
<body><div class="box1">111</div><div class="box2">111</div>
</body>
</html>
复制代码

在这里插入图片描述

缺点:

浮动会造成高度坍塌等不好操作
特定场合还需要去清除浮动
不推荐

2.清除行内块元素之间的空格和换行符
上面介绍到两个行内块元素之间的空格和换行符都会被浏览器所处理,那么我们就消除。 不建议

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box1{display: inline-block;width: 100px;height: 100px;background: pink;}.box2{display: inline-block;width: 100px;height: 100px;background: greenyellow;}</style>
</head>
<body><div class="box1">111</div><div class="box2">111</div>
</body>
</html>
复制代码

在这里插入图片描述

缺点:

代码不美观,看起来很臃肿
编译器可能有自动格式化会强制换行
不推荐

3.父元素设置font-size:0
前面我们介绍到间距其实是由于换行符等被转义,是由font-size进行控制的,我们可以将父元素的font-size设置为0

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body{font-size: 0px;}.box1{display: inline-block;width: 100px;height: 100px;background: pink;}.box2{display: inline-block;width: 100px;height: 100px;background: greenyellow;}</style>
</head>
<body><div class="box1">111</div><div class="box2">111</div>
</body>
</html>
复制代码

在这里插入图片描述

可以发现我们这里字体消失了

原因:由于font-size是可继承的,所以子元素的字体大小也变为了0,所以我们需要给子元素加上font-size。

缺点:

由于font-size是可继承的,所以子元素还需要单独设置font-size
推荐

4.父元素设置word-spacing
通过父元素设置word-spacing为负值(负值可无限大,负值超出不会造成影响),达到消除间距的作用

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body{word-spacing: -5px;}.box1{display: inline-block;width: 100px;height: 100px;background: pink;}.box2{display: inline-block;width: 100px;height: 100px;background: greenyellow;}</style>
</head>
<body><div class="box1">111</div><div class="box2">111</div>
</body>
</html>
复制代码

在这里插入图片描述

缺点:

可能会影响父元素里的其他元素(可单独给需要消除的包裹一层div)
推荐

总结
以上就是今天要讲的内容,前端怪谈将带你一起探索前端中的"怪事"。

最后
如果你觉得此文对你有一丁点帮助,点个赞。或者可以加入我的开发交流群:1025263163相互学习,我们会有专业的技术答疑解惑

如果你觉得这篇文章对你有点用的话,麻烦请给我们的开源项目点点star:http://github.crmeb.net/u/defu不胜感激 !

完整源码下载地址:https://market.cloud.tencent.com/products/33272

PHP学习手册:https://doc.crmeb.com
技术交流论坛:https://q.crmeb.com

这篇关于两个inline-block元素靠近为什么有间隙?的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/683850

相关文章

两个月冲刺软考——访问位与修改位的题型(淘汰哪一页);内聚的类型;关于码制的知识点;地址映射的相关内容

1.访问位与修改位的题型(淘汰哪一页) 访问位:为1时表示在内存期间被访问过,为0时表示未被访问;修改位:为1时表示该页面自从被装入内存后被修改过,为0时表示未修改过。 置换页面时,最先置换访问位和修改位为00的,其次是01(没被访问但被修改过)的,之后是10(被访问了但没被修改过),最后是11。 2.内聚的类型 功能内聚:完成一个单一功能,各个部分协同工作,缺一不可。 顺序内聚:

遮罩,在指定元素上进行遮罩

废话不多说,直接上代码: ps:依赖 jquer.js 1.首先,定义一个 Overlay.js  代码如下: /*遮罩 Overlay js 对象*/function Overlay(options){//{targetId:'',viewHtml:'',viewWidth:'',viewHeight:''}try{this.state=false;//遮罩状态 true 激活,f

学习记录:js算法(二十八):删除排序链表中的重复元素、删除排序链表中的重复元素II

文章目录 删除排序链表中的重复元素我的思路解法一:循环解法二:递归 网上思路 删除排序链表中的重复元素 II我的思路网上思路 总结 删除排序链表中的重复元素 给定一个已排序的链表的头 head , 删除所有重复的元素,使每个元素只出现一次 。返回 已排序的链表 。 图一 图二 示例 1:(图一)输入:head = [1,1,2]输出:[1,2]示例 2:(图

JS和jQuery获取节点的兄弟,父级,子级元素

原文转自http://blog.csdn.net/duanshuyong/article/details/7562423 先说一下JS的获取方法,其要比JQUERY的方法麻烦很多,后面以JQUERY的方法作对比。 JS的方法会比JQUERY麻烦很多,主要则是因为FF浏览器,FF浏览器会把你的换行也当最DOM元素。 <div id="test"><div></div><div></div

力扣第347题 前K个高频元素

前言 记录一下刷题历程 力扣第347题 前K个高频元素 前K个高频元素 原题目: 分析 我们首先使用哈希表来统计数字出现的频率,然后我们使用一个桶排序。我们首先定义一个长度为n+1的数组,对于下图这个示例就是长度为7的数组。为什么需要一个长度为n+1的数组呢?假如说总共有三个数字都为1,那么我们需要把这个1放在数组下标为3的位置,假如说数组长度为n,对于这个例子就是长度为3,那么它的

QML入门之基本元素

元素分为可视元素与非可视元素,可能元素例如Rectangle、Button等。非可视元素如Timer(定时器)、MouseArea(鼠标区域)等。非可视元素一般用于操作可视元素。 基础元素 Item Item(基础元素对象)是所有可视元素的基础对象,它们都继承自Item。可是元素存在以下共有属性。 Group(分组)Properties(属性)Geometry(几何属性)x

2024年AMC10美国数学竞赛倒计时两个月:吃透1250道真题和知识点(持续)

根据通知,2024年AMC10美国数学竞赛的报名还有两周,正式比赛还有两个月就要开始了。计划参赛的孩子们要记好时间,认真备考,最后冲刺再提高成绩。 那么如何备考2024年AMC10美国数学竞赛呢?做真题,吃透真题和背后的知识点是备考AMC8、AMC10有效的方法之一。通过做真题,可以帮助孩子找到真实竞赛的感觉,而且更加贴近比赛的内容,可以通过真题查漏补缺,更有针对性的补齐知识的短板。

【CSS in Depth 2 精译_024】4.2 弹性子元素的大小

当前内容所在位置(可进入专栏查看其他译好的章节内容) 第一章 层叠、优先级与继承(已完结) 1.1 层叠1.2 继承1.3 特殊值1.4 简写属性1.5 CSS 渐进式增强技术1.6 本章小结 第二章 相对单位(已完结) 2.1 相对单位的威力2.2 em 与 rem2.3 告别像素思维2.4 视口的相对单位2.5 无单位的数值与行高2.6 自定义属性2.7 本章小结 第三章 文档流与盒模型(已

17 通过ref代替DOM用来获取元素和组件的引用

重点 ref :官网给出的解释是: ref: 用于注册对元素或子组件的引用。引用将在父组件的$refs 对象下注册。如果在普通DOM元素上使用,则引用将是该元素;如果在子组件上使用,则引用将是组件实例: <!-- vm.$refs.p will be the DOM node --><p ref="p">hello</p><!-- vm.$refs.child will be the c

react笔记 8-19 事件对象、获取dom元素、双向绑定

1、事件对象event 通过事件的event对象获取它的dom元素 run=(event)=>{event.target.style="background:yellowgreen" //event的父级为他本身event.target.getAttribute("aid") //这样便获取到了它的自定义属性aid}render() {return (<div><h2>{