display: inline-block元素间空隙是因HTML空白字符被解析为文本节点所致，间隙宽度=父容器font-size的0.25em；可通过父级font-size:0+子级重置、flex布局、移除HTML空白或负margin等方案消除。

为什么 display: inline-block 元素之间总有看不见的空隙

这不是 bug，是浏览器把换行符、空格当作文本节点渲染的结果。HTML 中写成多行的

或 标签，只要中间有空白字符（包括回车），就会被解析为一个空格，在行内上下文中就表现为间隙。

常见错误现象：inline-block 元素横向排列后总比预期宽，用开发者工具看元素之间有 4px 左右的空白；加了 margin: 0 也没用；用 float 能避开但带来清除浮动新问题。

• 这个间隙宽度 = 父容器当前 font-size 的 0.25em（通常约 4px）
• 只影响 inline 和 inline-block 元素，block 或 flex 不受影响
• 即使子元素本身 font-size: 0，父级没设，空隙照旧

用 font-size: 0 消除间隙的实际写法

核心是让父容器“看不见”那个空格——把字体大小设为 0，空格就没宽度了。但要注意子元素得重置回来，否则文字全看不见。

使用场景：导航栏菜单项、图标按钮组、响应式图片栅格等需要精确横向对齐的 inline-block 布局。

• 父级设 font-size: 0，子级必须显式恢复字体大小，比如 font-size: 16px
• 如果子元素含输入框、下拉框等表单控件，它们的默认字体可能继承异常，需单独指定 font-size
• 不要只在开发时设 font-size: 0，上线后也生效；它不影响可访问性，屏幕阅读器仍能读取内容

.nav {
  font-size: 0;
}
.nav-item {
  display: inline-block;
  font-size: 14px; /* 必须重置 */
}

比 font-size: 0 更稳妥的替代方案

它有效，但副作用明显：所有子元素文本都要手动重置字体，嵌套深时容易漏；而且如果子元素用了 em 单位做尺寸计算，会受父级 font-size: 0 影响而失效。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

性能/兼容性影响：无渲染性能问题，IE8+ 全支持，但语义和维护成本偏高。

• 改用 flex：父级 display: flex，间隙自动消失，现代项目首选
• 移除 HTML 空白：把标签写成
  连写，可读性差，团队协作难接受
• 负 margin 抵消：比如 margin-right: -4px，但需适配不同字号，响应式下易错

最容易被忽略的细节：伪元素和注释也会触发间隙

很多人以为只要删掉换行就行，结果发现还是有缝——因为 HTML 注释 、或用 ::before/::after 插入的纯空格内容，同样会被当作文本节点参与布局。

• 检查开发者工具 Elements 面板里，两个 inline-block 元素之间是否夹着 #text 节点
• 注释写在标签同一行末尾（
  ）仍会产生空格
• 用伪元素生成内容时，避免只写空格，比如 content: " " 就会引入间隙

事情说清了就结束

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！