为什么相邻的inline-block元素间隔会出现，如何解决？

8 min read

有一个常见的问题是相邻的 inline-block 元素之间会出现缝隙，这是因为 HTML 中的空格、回车、换行等字符实际上也占据了一定的宽度。这些字符对于文本元素通常没有影响，但对于 inline-block 元素会引起问题。

有两种解决方式：

  1. 删除元素之间的空格、回车、换行等字符。

  2. 设置父元素的 font-size 为 0，然后再单独设置子元素的 font-size，这样可以消除字符占据的宽度。

<style>
  .parent {
    font-size: 0;
  }
  .child {
    font-size: 16px;
  }
</style>
<div class="parent">
  <span class="child">inline-block1</span><span class="child">inline-block2</span>
</div>