两个行内块元素的空白间隙问题

一、问题根源

浏览器会将两个行内块级元素之间的空字符、换行符和制表符等空白字符解析为字符间距。
PS：也就是解析为一个空格，从而导致出现空白间隙；间隙的大小由字符的大小决定。

例如：当代码书写如下时：

<div class="item">元素1</div>
<div class="item">元素2</div>

浏览器会将两行代码之间的换行符解析为一个空格，导致两个元素之间出现一个空白

---

二、解决方案

1. 移除HTML代码中的空白（不推荐）

我们可以直接移除代码中的空白，将元素紧挨着书写

<div class="item">元素1</div><div class="item">元素2</div>

但是这样并不利于代码的可读性，故此并不推荐

2. 利用CSS设置负间距（不推荐）

给最后一个元素设置负的margin-left，抵消空白间距

.item {
  display: inline-block;
  margin-left: -4px;  /*经验值，根据实际情况进行调整*/
}

但是这样可能需要适配不同的场景，因为空白间隙的大小和字体的大小有关；故此并不推荐

3. 设置父元素字体大小 （推荐）

先将父元素的font-size设置为0，再将子元素的font-size设置为正常大小

.parent {
  font-size: 0;  /*消除空白间隙*/
}
.item {
  display: inline-block;
  font-size: 16px;  /*恢复子元素字体大小*/
}

这种方式的兼容性、可读性均佳，较为推荐

4. 使用Flex等布局实现（推荐）

将父元素设置为display: flex，利用弹性布局来消除空白间隙

.parent {
  display: flex;  /*消除空白间隙*/
}
.item {
  display: inline-block;
}

这种方式可读性和自适应性均佳，较为推荐

---

三、总结

• 空白间隙的本质是空白字符的渲染结果，因此解决方案的核心是消除或覆盖这些字符的影响
• 优先使用font-size: 0和display: flex属性进行解决