一、行内元素的间隙处理
在编写 HTML 时，多个行内级元素之间会有一定的空隙，比如多个 span 元素之间就有一定的空隙，常见一个 HTML 页面，使用一个 div.box 包裹多个 span 元素，具体代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
span {
background-color: orange;
}
</style>
</head>
<body>
<div class="box">
<span>aaa</span>
<span>bbb</span>
<span>ccc</span>
</div>
</body>
</html>
在浏览器中打开 HTML 页面，效果如下：
可以看到三个 span 元素之间是存在一定的空隙的，实际上这个空隙是由于在编写 HTML 中的 span 出现的换行符导致的。
因此我们可以将三个 span 写在同一行，去除 HTML 代码中 span 之间的换行符就可以去除页面上 span 元素之间的空隙了，修改 HTML 代码为如下形式：
<div class="box"><span>aaa</span><span>bbb</span><span>ccc</span></div>
刷新浏览器，效果如下：
可见 span 之间的空隙确实被去除掉了，但是这种方式不太合适，降低了代码的可阅读性。
还有第二种方式可以去除 span 元素之间的空隙，首先将 HTML 代码恢复为原来的形式：
<body>
<div class="box">
<span>aaa</span>
<span>bbb</span>
<span>ccc</span>
</div>
<!-- <div class="box"><span>aaa</span><span>bbb</span><span>ccc</span></div> -->
</body>
第二种方式取出 span 元素之间的空隙可以设置 div.box 的 font-size 为 0，并且在 span 中把 font-size 在设置回来，具体代码如下：
.box {
font-size: 0;
}
span {
background-color: orange;
font-size: 16px;
}
刷新浏览器，效果如下：
这样的方式也可以实现去除 span 元素之间的空隙，这是因为行内级元素默认是基于其父元素的字体大小进行布局的，而如果将父元素的字体大小设置为0，就会导致子元素也没有了基准字体大小，从而消除了它们之间的空隙。
前面两种方式都可以去除 span 元素之间的空隙，但是这个空隙并不可控，我们可以通过浮动的方式来消除 span 元素之间的空隙。
取消 font-size 的设置，并且给 span 元素设置左浮动，具体代码如下：
/* .box {
font-size: 0;
} */
span {
background-color: orange;
/* font-size: 16px; */
float: left;
}
刷新浏览器，效果如下：
可以看到已经成功的消除了间隙，并且我们还可以在此基础上通过 maring 外边距来控制他们之间间隙的大小，比如设置 margin-left 为 5px：
span {
background-color: orange;
/* font-size: 16px; */
float: left;
margin-right: 5px;
}
刷新浏览器，效果如下：
通过给子元素设置统一方向的浮动就可以去除空隙，并且可以通过外边距自由的控制空隙的大小。
当然除了上面三种方式外还可以通过 flex 布局的方式来去除空隙。
