inline-block 会产生约4px间隙，因html空白符被解析为u+0020空格字符；需用font-size:0或移除空白等方案消除；对齐需设vertical-align:top/middle，非baseline。
display: inline-block 能替代 float 实现横向排列，但必须避开默认的空白间隙和行内对齐逻辑，否则布局会错位或换行异常。
为什么 inline-block 会产生 4px 间隙？
HTML 源码中元素间的换行符、空格、制表符会被浏览器解析为一个空白字符（U+0020），而 inline-block 元素按文本流渲染，这个空白字符就表现为约 4px 的间隙。这不是 bug，是规范行为。
常见错误现象：li 或 div 并排后总宽度超父容器，最后一项被挤到下一行；调试时发现元素间有不可见但可选中的“空隙”。
实操建议：
- 父容器设
font-size: 0，子元素单独重置font-size（兼容性好，IE8+ 支持） - 移除 HTML 中子元素标签间的空白（不现实，仅适合构建工具自动处理）
- 用
letter-spacing: -0.31em+ 子元素letter-spacing: normal（部分旧版 Safari 有渲染抖动）
如何让 inline-block 元素严格左对齐且不换行？
text-align: left 对父容器生效，控制的是子元素的**基线对齐位置**，不是左边缘对齐。若子元素高度不一致，vertical-align: baseline（默认值）会导致视觉错位——高元素底部对齐，矮元素“悬空”。
使用场景：横向导航菜单、图标按钮组、响应式卡片栅格（需配合 white-space: nowrap 防止文字折行破坏结构）。
实操建议：
- 统一设
vertical-align: top或vertical-align: middle，避免基线对齐干扰 - 父容器加
white-space: nowrap可强制单行，但需配合overflow-x: auto处理溢出 - 不要混用
float和inline-block—— 后者不脱离文档流，前者会引发高度塌陷，叠加使用反而更难调试
inline-block 在响应式中比 float 更可控的原因
float 的换行依赖“剩余空间探测”，前一个浮动项高度不同，会影响后续项的垂直起始位置（典型如“俄罗斯方块卡住”现象）；而 inline-block 按纯文本流排列，只看当前行剩余宽度和单个元素宽度，换行时机更确定。
性能影响：两者都无重排开销，但 inline-block 不触发 BFC，父容器无需额外清浮动（如 overflow: hidden 或伪元素），DOM 结构更干净。
实操建议：
- 媒体查询中只需改子元素
width，无需重置float方向或清浮动方式 - 配合
max-width和box-sizing: border-box，能更好适配 viewport 变化 - 注意：IE7 及以下不支持
inline-block对原生块元素生效，需 hack（*display: inline; *zoom: 1），但 2026 年已基本可忽略
真正容易被忽略的是 vertical-align 的默认值——它不是 top，也不是 middle，而是 baseline。哪怕所有元素高度一致，只要内部文字行高或字体不同，视觉对齐就可能偏移。调样式时先写死 vertical-align: top，再根据需要微调。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
