inline-block元素间间隙源于HTML空白字符被渲染为空格,可用font-size:0配合子元素重设字号、HTML无空格写法或注释连接消除;不推荐letter-spacing负值,因兼容性差且影响可访问性。

inline-block 元素间为什么会有看不见的间隙
这个间隙不是 margin,也不是 padding,而是 HTML 解析器把换行符、空格、制表符这些空白字符当作一个 父容器设 既然间隙来自 HTML 中的空白,那干脆不让它出现: (空格符)渲染出来的——只要 写在不同行或中间有空格,浏览器就会在它们之间插入一个“文字级”的空白,然后按当前 font-size 渲染成可见间隙。用 font-size: 0 消掉间隙最直接但要注意继承
font-size: 0 能让那个“空格”失去字号,从而视觉上消失。但它会影响所有子元素,所以必须给 inline-block 子元素单独恢复字号:.container {
font-size: 0;
}
.container > * {
font-size: 14px; /* 或 inherit,但需确保父级有字号 */
display: inline-block;
}
font-size: 0,容易漏恢复,导致文本不可见font-size,否则文字会变小甚至消失用注释或无换行写法“物理消除”空白字符










