display:inline-block元素之间为什么会出现间隙

问题的核心是 HTML 文件中的换行符、空格和制表符 在浏览器渲染时会被解释为 空白字符，并影响 行内元素（如 inline、inline-block）之间的间距。

详细解释：

在 HTML 中，元素之间的 换行符 或 空格 会被浏览器当作 空白字符 渲染，这在 行内元素（如 span、a、inline-block 元素等）之间产生了一个可见的间隙。这是因为 HTML 标签本身并不会直接控制这些空白字符，浏览器会根据这些字符的位置来决定是否渲染间隙。

例子：

假设您这样写 HTML：

<div style="display: inline-block; width: 100px; height: 100px; background-color: red;"></div>
<div style="display: inline-block; width: 100px; height: 100px; background-color: blue;"></div>

这两个 inline-block 元素之间有一个换行符（即 HTML 中的行尾换行符）。当浏览器解析这个 HTML 时，换行符 被当作空白字符，渲染成 间隙。

解决方案：

为什么会有间隙？

行内元素（inline、inline-block 等）之间默认会有一个 间隔，这是因为在 HTML 文件中，换行符、空格或制表符 等空白字符会被视作 空格 来处理。这个空格通常是根据父元素的 font-size 来决定的，浏览器会在这些元素之间渲染一个 空隙。

总结：

• 行内元素之间的间隙 是由 HTML 中的空白字符（如换行符、空格）引起的。
• 要避免或消除这个间隙，可以通过将元素放在同一行内书写、使用注释移除空白字符、设置父元素的 font-size 为 0，或者使用 flex 布局等方式。