inline-block元素间空隙源于HTML解析器将换行/空格作为空白文本节点渲染,表现为约4px间隙;可通过HTML压缩、font-size:0、负margin或flex布局消除。

为什么 display: inline-block 元素之间总有看不见的空隙
这不是 bug,是 HTML 解析器把换行符和空白符当作文本节点渲染的结果。只要两个 inline-block 元素在源码里用换行或空格分隔,浏览器就会插入一个「空格字符」,而这个空格会参与行内布局,表现为约 4px 的间隙(取决于字体大小和 font-family)。
常见表现:nav 里的菜单项错位、gallery 图片网格对不齐、按钮组中间出现白线。
消除 inline-block 间距的四种可靠方法
没有“绝对最优”,选哪种取决于你是否能改 HTML 结构、是否要兼容老项目、以及是否已有字体设置干扰。
-
HTML 层面抹掉换行:把
写成一行,或用 HTML 注释连接:










