问题的出现原因：两个inline-block 元素之间存在间隙的原因是由于inline-block元素默认的vertical-align属性值为baseline，而baseline对齐会导致元素之间存在间隙。

解决方法：将inline-block元素的vertical-align属性值设置为top，即可消除元素之间的间隙。

整理成一篇文章如下：

CSS:

span {
  display: inline-block;
}

HTML:

This will have
a gap between the elements
This won't havea gap between the elements

在网页开发中，有时候我们会发现两个inline-block元素之间会存在一定的间隙，即使没有添加任何的margin或padding。这是因为inline-block元素默认的vertical-align属性值为baseline，而baseline对齐会导致元素之间存在间隙。

那么，如何解决这个问题呢？其实很简单，只需要将inline-block元素的vertical-align属性值设置为top即可消除元素之间的间隙。

在上述的代码中，我们可以看到有四个元素，前两个元素之间存在间隙，而后两个元素之间没有间隙。

这是因为第一个和第三个元素之间没有添加任何的空格或换行符，所以它们之间会存在默认的间隙，而第二个和第四个元素之间添加了一个空格，所以它们之间不会存在间隙。

为了解决这个问题，我们只需要将CSS代码中的display属性设置为inline-block，然后添加一个vertical-align属性，并将其值设置为top即可。

可以将CSS代码修改为如下所示：

span {
  display: inline-block;
  vertical-align: top;
}

这样修改后，再次运行代码，我们会发现所有的元素之间都不再存在间隙了。

通过以上的方法，我们可以很容易地解决两个inline-block元素之间存在间隙的问题，只需要添加一行CSS代码，即可达到预期的效果。希望这篇文章对大家有所帮助。

两个inline-block元素之间出现空隙的原因是HTML中的空格和换行符，而解决方法是使用HTML注释来删除空格和保持代码格式。

在HTML中，当两个连续的inline-block元素之间存在空格或换行符时，浏览器会将其解释为一个空格字符，并在页面中显示出来，从而导致两个元素之间出现间隙。

为了解决这个问题，可以使用HTML注释来删除空格和换行符。在代码中，可以在两个inline-block元素之间添加注释，通过注释来分隔元素，从而避免空格字符的出现。

以下是一个示例代码，演示了如何使用HTML注释来删除空格和保持代码格式：

123

通过在每个inline-block元素之间添加``注释，可以确保没有空格字符被解释和显示出来，从而达到删除空隙的效果。

这种方法适用于任何情况下两个inline-block元素之间出现空隙的问题。通过使用HTML注释，可以保持代码的整洁和可读性，同时解决了间隙问题。

当使用inline-blocks时，可以通过在父容器上应用word-spacing: -3px;和letter-spacing: -3px;来消除间距，然后在inline-block元素上恢复这些规则，使用word-spacing: normal;和letter-spacing: normal;。

例如，使用以下基本标记：

<div>
   <span>...</span>
   <span>...</span>
   <span>...</span>
</div>

最小的CSS代码是

div {
   word-spacing: -3px;
   letter-spacing: -3px;
}
span {
   word-spacing: normal;
   letter-spacing: normal;
   display: inline-block;
}

另一个可能性（我不推荐，但你可能需要知道）是在父容器上设置font-size: 0;。

非常巧妙！干杯！