inline-block间隙源于HTML换行/空格被渲染为文本节点，宽约4px；Flexbox天然忽略空白符，无间隙问题，且对齐由justify-content/align-items控制，不依赖vertical-align。

Flex布局和inline-block布局的核心差异不在“能不能并排”，而在于“谁控制对齐、谁承担间隙、谁决定基线”——用错一个，就会在换行、居中、响应式时反复踩坑。

inline-block元素间的4px间隙是怎么来的

这个间隙不是CSS bug，而是HTML解析规则：两个<div>标签之间的换行符或空格，会被浏览器当作一个空白字符（U+0020），再按当前<code>font-size渲染成可见空白。默认font-size: 16px下，这个空白宽度≈4px。

• 清除方式不止一种：font-size: 0在父容器上设，再给子元素显式重置font-size；或者用margin-right: -4px硬拉；或者删HTML空格（但可读性差）
• JS动态插入的文本节点（哪怕只含一个空格）也会触发该间隙，容易被忽略
• 旧版 Safari 中，img在font-size: 0父容器里可能渲染异常，需额外加vertical-align: top或显式恢复字体

Flex布局为什么天然不产生间隙

Flex容器内部不把空白符当内容处理——它只认子元素为flex item，HTML中的换行/空格/制表符全被忽略。这不是“修复了间隙”，而是根本绕过了文本流解析逻辑。

• justify-content控制主轴分布（如space-between），是主动分配空间，不是被动消除空白
• 子元素即使带空格或换行，DOM结构也不影响布局输出
• 但要注意：flex容器本身不继承font-size对齐逻辑，所以vertical-align对子项完全无效

vertical-align和align-items的作用对象完全不同

vertical-align只对inline或inline-block元素生效，作用于**行内上下文中的基线对齐**；而align-items是Flex容器属性，控制所有子项在**交叉轴上的对齐位置**。

立即学习“前端免费学习笔记（深入）”；

• 用inline-block时，vertical-align: middle对齐的是文字基线，受line-height、字体x-height干扰，同一行不同字体的元素很难真正居中
• 用flex或inline-flex时，align-items: center直接让子项的交叉轴中心与容器中心对齐，与字体无关
• inline-flex容器自身仍参与行内流，所以它的vertical-align（比如设为top）会影响它和旁边文字的相对位置，但不影响其内部子项

什么时候该选inline-flex而不是inline-block

当你需要“嵌入文本流”但又要求子元素之间有统一、可控的对齐和间距时，inline-flex是更干净的选择——它保留了inline-block的行内行为，却拿掉了间隙和基线对齐的不确定性。

• 按钮组、标签云、图标+文字组合这类组件，用display: inline-flex + gap: 8px比一堆margin-right更可靠
• inline-flex支持justify-content和align-items，意味着你可以让几个图标在段落中自动等宽撑开，而inline-block做不到
• 注意兼容性：gap在老版 Safari 需要-webkit-gap前缀，但justify-content无此问题

最常被忽略的一点是：很多人以为把inline-block换成inline-flex只是“换个写法”，其实是在切换布局上下文——前者属于文本流，后者属于弹性流。一旦混用（比如给inline-flex容器设vertical-align又同时用align-items），结果往往取决于浏览器如何解释冲突优先级，而不是你预期的那样。