会出现间隙的原因，其实是行内元素、行内块元素标签之间的换行或其他格式不可见字符带来的影响。
案例：
<!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属性（浮动）
参考：
