详解CSS 去掉inline-block元素间隙的几种方法

首先讲解 CSS 去掉 inline-block 元素间隙的原因。当我们使用 inline-block 将多个元素排列时，如果 HTML 代码中不加入换行回车或者空格字符，它们之间就会出现一些间距，而这些间距的产生是由于 inline-block 元素默认按照字符间距排列的。

那么接下来，我将以以下两种方法为例，详细讲解如何去掉 inline-block 元素间隙：

方法一：设置父元素 font-size: 0

1. 首先，在 HTML 代码中给父元素设置 font-size: 0。这样所有子元素的间距就被消去了。

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

.parent {
  font-size: 0;
}

.child {
  display: inline-block;
  width: 50px;
  height: 50px;
  background: red;
  margin-right: 10px;
}

1. 接着，为了防止子元素中的文字因为父元素 font-size 的改变而出现问题，需要为每个子元素设置一个正常的 font-size。

.child {
  font-size: 12px;
}

方法二：将所有元素写在同一行

1. 在 HTML 代码中将所有需要排列的子元素都写在同一行，并且将它们之间的所有空格都去掉。

<div class="parent">
  <div class="child"></div><div class="child"></div><div class="child"></div>
</div>

1. 然后在 CSS 中为每个子元素设置 display: inline-block。

.child {
  display: inline-block;
  width: 50px;
  height: 50px;
  background: red;
  margin-right: 10px;
}

通过以上两种方法，我们就可以去掉 inline-block 元素间隙了。其中方法一的原理是利用了父元素的 font-size 设置为 0 后取消子元素间距的特性。方法二则是利用了将元素都写在同一行后，去掉了字符间距的特性。