display:inline-block 中间有空隙怎么解决

`display: inline-block;` 属性通常用于创建行内块级元素，但是当两个元素之间有空白字符（如空格、换行符等）、浮动元素或者存在默认边距和填充时，可能会出现间距。要解决这个问题，你可以采取以下几种方法：

1. **消除空白**：删除直接相邻元素之间的空格、制表符或换行符。可以使用 ` `（非 Breaking Space）代替空格。

<div style="display: inline-block;">元素A</div><div style="display: inline-block;">元素B</div>

改为：

<div style="display: inline-block;">元素A</div>&nbsp;<div style="display: inline-block;">元素B</div>

2. **设置`font-size: 0`**：对于包含文本的元素，将它们的 `font-size` 设置为0，可以去除文本间的默认空白。

<style>
.container {
  font-size: 0;
}
</style>

<div class="container">
  <div style="display: inline-block;">元素A</div>
  <div style="display: inline-block;">元素B</div>
</div>

3. **负边距**：对其中一个或两个元素应用负 `margin` 来抵消间隙，注意要控制好值，以免影响其他布局。

4. **清除浮动**：如果是因为浮动元素导致的间隙，可以在最后一个 `inline-block` 元素之后添加一个清除浮动的 `clearfix` 类。

5. **CSS Flexbox 或 Grid**：如果你的项目兼容，可以考虑使用 Flexbox 或 Grid 布局，它们能更好地控制元素间的间距。