方案一：源码中直接就写成一行

方案二：改变HTML结构 (推荐)

方案三：用注释 (推荐)

方案四：margin设为负值;

方案五：font-size: 0

方案六：letter-spacing设置为负值;

方案七：给行内块元素添加float属性（浮动）

会出现间隙的原因，其实是行内元素、行内块元素标签之间的换行或其他格式不可见字符带来的影响。

案例：

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>Document</title><style>* {margin: 0;padding: 0;}span {font-size: 10px;background-color: antiquewhite;}</style>
</head>
<body><span>111</span><span>222</span><span>333</span>
</body>
</html>

效果：

目的效果：

这个距离是父级字体大小的1/3

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>Document</title><style>* {margin: 0;padding: 0;}body {font-size: 100px;}span {font-size: 20px;background-color: antiquewhite;}</style>
</head>
<body><span>111</span><span>222</span><span>333</span>
</body>
</html>

方案一：源码中直接就写成一行

<div class = "box"><span>你好</span><span>你好</span><span>你好</span></div>

方案二：改变HTML结构 (推荐)

<div class = "box"><span>你好</span><span>你好</span><span>你好</span></div>

方案三：用注释 (推荐)

<div class = "box"><span>你好</span><!-- 消除空格 --><span>你好</span><!-- 消除空格 --><span>你好</span></div>

方案四：margin设为负值;

<style>.box span{margin-left:-0.33333333em;}
</style><body><div class = "box"><span>你好</span><span>你好</span><span>你好</span></div>
</body>

方案五：font-size: 0

给父元素设置 font-size : 0 后，需要重新给子元素设置字号

<style>.box{font-size:0;}.box>span{font-size:16px;}</style><body><div class = "box"><span>你好</span><span>你好</span><span>你好</span></div>
</body>

这样处理在Firexfox,chrome等浏览器下是达到了效果，可是在Safari下可问题依然存在

方案六：letter-spacing设置为负值;

将letter-spacing设为-0.333333em即可。但是与font-size一样，改变letter-spacing时会改变内部子元素的间隙，需要在子元素内手动进行矫正。

<style>.box{letter-spacing: -0.333333em;}.box>span{letter-spacing: 0;}</style><body><div class = "box"><span>你好</span><span>你好</span><span>你好</span></div>
</body>

方案七：给行内块元素添加float属性（浮动）

参考：

HTML（四）解决行内元素/行内块元素中间空隙_喝啤酒的猫的博客-CSDN博客_行内块元素之间的空隙

处理行内元素行内块元素中间空隙相关推荐

html怎么转换内联元素,css怎么将内联元素设成块元素？
元素就是标签,布局中常用的有三种标签,块元素.内联元素.内联块元素,了解这三种元素的特性,才能熟练的进行页面布局.下面我们来看一下css将内联元素设成块元素的方法. css使用display:bloc ...
【CSS】通过定位修改 display 显示模式 ( Display 显示模式转换 | inline-block 改块元素为行内块元素示例 | 为块元素设置浮动 | 为块元素设置定位 )
文章目录一.Display 显示模式转换二.块元素示例三.inline-block 改元素为行内块元素示例四.为块元素设置浮动五.为块元素设置定位一.Display 显示模式转换 disp ...
css怎么将块元素变成,CSS块元素、行内元素、行内块元素的转换
一.块元素转行内元素:display:inline 二.行内元素转块元素:display:block div{ display: inline; /*无效 width: 500px; height: ...
让行内元素转化为块元素的三种方法与特点详解
1.添加display:block属性,不脱标,独占一行,默认高度与内容同高. 2.添加浮动,脱标则自动转化块元素,宽默认由内容撑开. 3.添加固定定位或者绝对定位,依然脱离标准流,转化为块元素,宽默 ...
什么是块元素?什么是行内元素?
什么是块元素?什么是行内元素?想必学习web前端培训知识的同学们,课上都会有提到这一方面,如果对这个知识点还不是很熟悉,可以看看下面小编整理的内容. 什么是块元素?什么是行内元素? HTML标签语言提 ...
块级元素与行级元素（内联元素）
内联元素(inline element)一般都是基于语义级(semantic)的基本元素.内联元素只能容纳文本或者其他内联元素,常见内联元素"a".块元素(block elemen ...
php行内块,块级元素和行内块元素是什么？
在css基础当中,我们往往会遇到块元素和行内元素,块元素和行内元素也是很重要的基础知识,很多学生都感觉不重要,都不去学习,其实也是不正确的选择,下面我们来讲述一下块级元素和行内块元素是什么? 很多学生 ...
元素（块、行内、行内块
块元素的特点 1.支持所有样式 2.块级元素独占一行 3.块级元素默认宽度和父元素一样常用块元素块级元素一般 div p ol ul h1-h6 li dl dt dd 等都是初始化(样式重置 ...
CSS样式设置语法全解，样式优先级、值和单位、字体、文本、块级元素，行内元素，替换元素、非替换元素、display、float、position、table、li、光标、边距边框、轮廓、颜色背景
全栈工程师开发手册 (作者:栾鹏) 一个demo学会css css选择器全解 css操作语法全解 CSS样式设置语法全解: 样式优先级 1. !important标记的样式 > 内联样式(sty ...
行内元素（内联元素）与块级元素
在标准文档流里面,块级元素具有以下特点: 块级元素写完后会自动换行,有宽高可以修改. ①总是在新行上开始,占据一整行:②高度,行高以及外边距和内边距都可控制:③宽带始终是与浏览器宽度一样,与内容无关: ...

处理行内元素行内块元素中间空隙

方案一：源码中直接就写成一行

方案二：改变HTML结构 (推荐)

方案三：用注释 (推荐)

方案四：margin设为负值;

方案五：font-size: 0

方案六：letter-spacing设置为负值;

方案七：给行内块元素添加float属性（浮动）

处理行内元素行内块元素中间空隙相关推荐

最新文章

热门文章