inline-block元素间存在空白间隙且默认baseline对齐，导致视觉错位；间隙源于HTML换行/空格生成的文本节点，font-size为0可消除但需重设子元素字号；vertical-align应选text-bottom或top而非middle；flex布局更优，天然解决间隙与对齐问题。
不是宽度没设对，是 inline-block 元素之间默认有空白间隙，且垂直方向默认按基线（baseline）对齐——这两者叠加，会让“看起来宽度一致”的元素在视觉上错位、参差。
inline-block 之间的空白间隙从哪来？
HTML 源码里的换行符和空格会被浏览器解析成一个文本节点（类似一个空格字符），它有字体度量，宽度 ≈ font-size × 0.25。只要父容器 font-size 不为 0，这个间隙就存在，跟 width 设置无关。
- 不是 margin，不是 padding，开发者工具里查不到，但能选中、能被光标跳过
- 用
margin-right: -4px硬调值会失效：换字体、缩放、响应式改font-size后就不准了 - 最稳的 HTML 层面解法是标签连写：
<div></div><div></div>，不换行不空格 - CSS 层面推荐父容器设
font-size: 0，子元素再单独设回font-size（注意line-height会继承 0，得重设）
vertical-align: baseline 是罪魁祸首
inline-block 默认 vertical-align: baseline，但“baseline”不是一条固定线：含文字的 button 基线在文字底部；空 button 或 img 的基线在自身底边向上约 4px 处（预留 descender 空间）。它们对齐后，自然一高一低。
-
vertical-align: middle别乱用——它对齐的是父行框内text-top和text-bottom的中点，受font-size、line-height、兄弟元素字体影响，一动就漂移 - 图文并排或按钮组，优先用
vertical-align: text-bottom：把元素底边直接对齐到父级font-size定义的 em-box 底边，结果可预期 - 需要顶部严格对齐（比如多行文字旁的图标），用
vertical-align: top：只看父行框顶部，不依赖任何字体度量 - 别给父容器设
font-size: 0就以为万事大吉——那会让子元素文字消失，必须逐个重设font-size
为什么 flex 替代 inline-block 更省心？
当你发现要同时处理间隙 + 对齐 + 响应式重排时，inline-block 的修补成本已经高于重构成本。
立即学习“前端免费学习笔记（深入）”；
-
display: flex父容器天然无视 HTML 空白，间隙归零 -
align-items: flex-start或align-items: center直接控制垂直对齐，不牵扯 baseline -
gap属性可控间距，单位稳定，响应式友好 - IE11+ 支持良好；若需兼容 IE10，加
display: -ms-flexbox即可
真正难搞的不是怎么写对，而是意识到：间隙和错位不是 bug，是 inline-block 在按规范工作。你得主动接管 vertical-align，而不是等它“自动对齐”。
