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%。
