请问display:inline-block在什么时候会显示间隙？
display: inline-block 元素会在以下情况下显示间隙：
-
HTML 中的空格、换行符和制表符: 这是最常见的原因。浏览器会将
inline-block元素之间的空白字符渲染成一个空格。即使你的代码看起来很紧凑，如果 HTML 源码中存在空格或换行，也会产生间隙。 -
字体大小和行高:
inline-block元素的行高和字体大小会影响其基线的位置。如果相邻元素的基线不一致，也可能导致间隙出现，尤其是在垂直排列的情况下。 -
字母基线差异: 不同的字体或字号，即使行高相同，也可能因为字母基线的差异而产生微小的间隙。
-
margin 和 padding:
inline-block元素的margin和padding会像块级元素一样影响布局，从而产生间隙。
以下是一些解决 inline-block 元素间隙的方法：
- 移除 HTML 中的空格: 最直接的方法是删除元素之间的空格、换行符和制表符。你可以将所有
inline-block元素写在一行，或者使用 HTML 注释来去除空格。例如：
<span>item 1</span><!--
--><span>item 2</span><!--
--><span>item 3</span>
- 设置父元素的
font-size: 0;: 将父元素的字体大小设置为 0，可以消除由空格引起的间隙。然后，在inline-block元素上重新设置所需的字体大小。
<div style="font-size: 0;">
<span style="font-size: 16px;">item 1</span>
<span style="font-size: 16px;">item 2</span>
<span style="font-size: 16px;">item 3</span>
</div>
-
使用负 margin: 可以对
inline-block元素使用负 margin 来抵消间隙。但这需要仔细调整 margin 值，并且可能难以维护。 -
使用
float: 将inline-block元素设置为float: left;或float: right;可以消除间隙，但需要清除浮动以避免后续布局问题。 -
使用 Flexbox 或 Grid: Flexbox 和 Grid 布局提供了更灵活和强大的布局方式，可以轻松避免
inline-block元素的间隙问题。推荐使用这种现代布局方式。
选择哪种方法取决于具体的布局需求和个人偏好。通常情况下，font-size: 0; 和 Flexbox/Grid 是比较推荐的解决方案。
