inline-block元素间空隙源于html将换行/空格解析为文本节点，宽度≈父容器font-size的0.25em；可用font-size:0+子元素重置字号、flex+gap或html注释消除。
inline-block元素间的空隙不是margin，是HTML文本节点
这个空隙根本不是你漏写了margin或padding，而是浏览器把HTML源码里的换行符、空格、制表符解析成了一个“文本节点”——它本质就是一个空格字符（U+0020），在行内格式化上下文（IFC）中按font-size和line-height参与排版，宽度 ≈ 父容器font-size的 0.25em（比如font-size: 16px时约 4px）。
常见错误现象包括：
- 导航栏菜单项横向对不齐，明明每个设了
width: 100px，总宽度却超出预期 - 图标组底部参差不齐，哪怕所有元素都设了
vertical-align: middle - 用开发者工具选中元素时，能用光标跳过那个“看不见的间隙”，但查不到
margin或padding
为什么vertical-align: middle会让inline-block看起来错位
vertical-align: baseline（middle的计算基准）不是一条固定线，它依赖文字内容、line-height、兄弟元素字体度量。含文字的button基线在文字底边；纯img或空div的基线则在自身底边向上约 4px 处（预留 descender 空间）。它们强行对齐后，自然一高一低。
更稳的选择是：
-
vertical-align: text-bottom：让元素底边对齐父级 em-box 底边，结果可预期 -
vertical-align: top：只看父行框顶部，不依赖任何字体度量，适合多行文字旁的图标 - 避免用
vertical-align: middle，尤其当子元素类型混杂（文字+图片+空容器）时
font-size: 0 能消除空隙，但必须重置子元素字号
给父容器设font-size: 0，是让那个“空格文本节点”失去排版依据，从而视觉上消失。但它会继承下去，所以：
- 必须设在直接包裹 inline-block 子项的父容器上（比如
.nav），套多一层div却没设，无效 - 所有含文本的子元素（包括
input、button、伪元素::before）必须显式声明font-size（如16px或1rem），不能只写inherit - 若子元素用了
em单位（如line-height: 1.5），需改用无单位数值（line-height: 1.5仍有效），否则计算结果为 0
现代项目优先用flex + gap替代inline-block
如果你支持 Chrome 89+、Firefox 63+、iOS Safari 14.1+，display: flex是更干净的解法：
- flex 布局天然忽略 HTML 中的空白文本节点，无需处理
font-size继承问题 -
gap属性可精确控制间距（如gap: 8px），响应式下稳定，不随font-size变化 - IE10–11 不支持
gap，可用margin-right: 8px+:not(:last-child)回退 - 避免叠加
transform: scale()、letter-spacing或负margin补丁——这些操作会触发新渲染异常，且屏幕阅读器仍按原始 HTML 结构解析
真正容易被忽略的是：legacy 代码还没重构完时，有人一边用font-size: 0，一边又加margin-left: -4px补丁——补丁本身会干扰vertical-align逻辑，而且无法通过自动化测试覆盖。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
