inline-block 元素默认按 baseline 对齐并受 HTML 空白影响，导致底部留白、间隙和宽度超限；解决方法包括 vertical-align、font-size: 0、注释消除空白或改用 flex。
inline-block 元素默认对齐方式是 baseline
这是最常被忽略的根源问题：display: inline-block 的元素会像文字一样按基线（baseline）对齐，而不是顶部或中间。如果元素里有文字，浏览器会把文字的 baseline 当作对齐参考线；没有文字时，则按“假想文字”的 baseline 对齐——这会导致看似“莫名其妙”的底部留白或错位。
常见现象：img、button、div 并排用 inline-block 后，底部多出几像素空白，或高度不一致。
- 临时验证：给父容器加
font-size: 0，子元素再单独设字体大小，空白立刻消失（因为 baseline 失去参照） - 更稳妥做法：显式设置
vertical-align: top/middle/bottom，推荐top，语义清晰且兼容性好 - 注意：
vertical-align只对inline、inline-block、table-cell生效，对block无效
inline-block 元素间的空白会被渲染成空格
HTML 中换行或缩进产生的空白符（空格、制表符、换行）在 inline-block 元素之间会被浏览器当作一个空格字符渲染，宽度约 4px（取决于当前 font-size），造成意料之外的间隙。
- 删 HTML 换行：把
- 父容器设
font-size: 0，子元素重置font-size（注意继承影响，如子元素内文字需手动恢复） - 用注释“吃掉”空白：
- 更现代的替代方案：改用
display: flex，天然规避该问题（但若需支持 IE9 及以下，仍得用inline-block）
inline-block 布局中 width 百分比受空白影响
当多个 inline-block 元素设为 width: 50% 却无法并排两列时，大概率是空白间隙占了额外宽度，导致总宽超 100%。
立即学习“前端免费学习笔记（深入）”；
- 检查开发者工具的 computed 样式，看实际渲染宽度是否略大于预期
- 不要只写
width: 50%，配合vertical-align: top和空白清除手段（如font-size: 0）一起用 - 若用百分比 + padding/border，记得加
box-sizing: border-box，否则宽高会溢出
IE7/IE8 下 inline-block 需要 hack 支持
IE7 及更早版本不识别 display: inline-block 对非原生内联元素（如 div）的设置；IE8 支持但存在部分 bug（如 zoom 触发 hasLayout 后 vertical-align 异常）。
- 兼容写法：
display: inline-block; *display: inline; *zoom: 1; -
*display和*zoom是 IE6/7 的私有 hack（仅 IE 解析），*display: inline让块级元素假装是内联，*zoom: 1触发 hasLayout 以支持部分样式（如vertical-align） - 如果项目已放弃 IE8 及以下，这段 hack 可直接删除
真正麻烦的不是怎么写 inline-block，而是它把文本渲染规则带进了布局层——baseline、空白符、font-size 继承，这些本该属于排版的细节，全成了布局 bug 的来源。用之前先问一句：这里真需要 inline-block，还是 flex 或 grid 更干净？
