inline-block 元素之间间隙清除的几种方法

Posted 2021-01-14 zichi

两个 inline-block 元素之间会有间隙（事实上，除了 inline-block 元素，两个 inline 元素之间也是有间隙的），究其根本，其实就是 html 元素换行导致（可以尝试下，换行和元素之间加个空格，或者多个空格，结果一样，最后都是一个空格）。如何清除这个间隙呢？

方法 0 - 移除空格

我们知道，产生间隙的原因，是因为元素之间有空格（换行，tabs，多个空格等，最后的表现都是一个空格），那么理论上，去掉这个空格，就不会有间隙了。

如果 html 是在后端模板中，那么有些模板可能就自带了去除 html 元素间隙的功能，比如 php 模板 twig，自带 spaceless 标签，而一些 html minimize 的工具，也会去除 html 之间的空格

如果不符合上述情况，也没有关系，我们手动去除：

<!-- 方法一 -->
<div>
one</div><div>
two</div><div>
three</div>

<!-- 方法二 -->
<div>one</div
><div>two</div
><div>three</div>

<!-- 方法三 -->
<div>one</div><!--
--><div>two</div><!--
--><div>three</div>

虽然生效了，但是不太优雅，如果有多个标签，这么写 html 太累了（当然，如果 html 是模版生成的，一般会有循环方法，也还好，推荐第三种 comments 方法，可读性相对强点）

方法二 - 负值 margin

想象一下，两个元素之间有间隙，给元素加上负值的 margin，是不是就能消除间隙了？答案是肯定的，但是这个负值，到底是多少，有待商榷，因为这个间隙，和 inline-block 父元素的 font-size 大小有关，跟页面所用字体有关，可能还跟浏览器有关（这点我并未探索）

nav a {
  display: inline-block;
  margin-right: -4px;
}

所以这个方法并不好

方法三 - 父元素 font-size 设置为 0

父元素设置 font-size 为 0，然后子元素（即 inline-block）的元素再单独设置 font-size

据说安卓机器可能会有问题，可以看下最下面的前两个链接中的此法说明

方法四 - 改用 float 布局

方法五 - 改用 flex 布局

方法六 - white-space-collapsing:discard

css3 草案 white-space-collapsing:discard，详见 这里，截至目前（2018/10/21），还并未有浏览器实现

---

参考：

• Fighting the Space Between Inline Block Elements
• Remove Whitespace Between Inline-Block Elements
• How do I remove the space between inline-block elements?