使用font-size：0 来去掉inline-block元素之间的空隙方法

使用 font-size: 0 可以去掉 inline-block 元素之间产生的多余空隙，其原理是把元素内的空格和换行符等字符变成了 0 大小，从而实现消除多余间隙的效果。下面是方法的完整攻略：

1. 在包含元素上添加样式

可以在包含多个 inline-block 元素的容器上添加 font-size: 0 样式。这种方法的缺点是，如果容器中有文字内容，也会变成不可见的，所以需要在子元素上重新设置字体大小。

示例代码如下：

HTML:

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

CSS:

.container {
  font-size: 0;
}
.item {
  display: inline-block;
  width: 100px;
  height: 100px;
  background-color: red;
  font-size: 16px;
}

注意：在 .container 中设置了 font-size: 0，而在 .item 中设置了 font-size: 16px，这样就可以让 .item 内的文字能够正常显示。

2. 使用HTML注释

在子元素之间插入 HTML 注释也可以实现去掉多余间隙的效果。这种做法的好处是可以省去在上层元素中设置 font-size: 0 的过程。方法是在子元素的闭合标签后紧跟一行注释调整间隙。

示例代码如下：

HTML:

<div class="container">
  <div class="item"></div><!--
  --><div class="item"></div><!--
  --><div class="item"></div>
</div>

CSS:

.item {
  display: inline-block;
  width: 100px;
  height: 100px;
  background-color: red;
  font-size: 16px;
}

在 class="item" 的三个 div 元素之间添加注释，注释前面的空格会被去除掉，从而达到消除间隙的目的。

以上两种方法都能很好地解决 inline-block 元素之间的间隙问题，具体应用时可根据实际情况选择合适的方法。