inline-block底部空白间隙源于基线对齐，vertical-align可解决；box-sizing: border-box需显式设置且不继承；混用line-height易致高度异常，推荐flex/grid替代布局。
inline-block 元素底部默认有空白间隙
这是最常被误认为“盒模型错乱”的现象：多个 display: inline-block 元素水平排列时，元素底部出现约 4px 的空白，看起来像 margin 或 padding 没生效。
根本原因是：inline-block 元素会像文字一样参与行内格式化上下文，基线对齐（baseline）导致其下方预留了字母 g、y 等下沉字符的空间。
- 临时修复：给父容器加
font-size: 0，子元素再单独设字体大小（注意继承问题） - 更稳妥：给 inline-block 元素设
vertical-align: top（或middle、bottom），直接切断基线对齐逻辑 - 避免滥用：若只是布局需求，优先考虑
flex或grid，inline-block 本质是为图文混排设计的
box-sizing: border-box 未生效的典型场景
即使写了 box-sizing: border-box，元素宽高仍“撑开”容器，常见于未全局重置或选择器权重不足。
关键点在于：该属性不会自动继承，且浏览器默认值是 content-box。必须显式应用到目标元素上。
立即学习“前端免费学习笔记（深入）”；
- 推荐写法：
* { box-sizing: border-box; }放在 CSS 最前面（但注意<input>、<textarea></textarea>等表单控件可能需单独微调） - 检查是否被覆盖：用开发者工具看 computed 样式中
box-sizing是否为border-box，而不是被更高权重规则（如!important或 ID 选择器）重置 - 注意伪元素：如果对
::before/::after也用了 inline-block + 尺寸，它们同样需要独立设置box-sizing
inline-block + box-sizing 混用时的尺寸计算陷阱
当 display: inline-block 元素同时设置了 box-sizing: border-box 和 line-height，高度可能意外变大——因为 inline-block 元素的“行框高度”受 line-height 影响，而 height 只控制内容区（除非 line-height 小于 height）。
例如：
.item {
display: inline-block;
box-sizing: border-box;
width: 100px;
height: 40px;
padding: 10px;
border: 2px solid #000;
line-height: 20px; /* 这会让实际占据的行高变成 ~20px，但元素总高仍是 40px */
}但如果删掉 height，仅靠 line-height 和 padding，元素高度就会由行高撑起，此时 box-sizing 对 height 无影响（因没设 height）。
- 固定高度需求下，建议显式设
height并确认box-sizing: border-box已生效 - 避免在 inline-block 上依赖
line-height控制块级高度；它更适合文本垂直居中 - 若需紧凑排列，把
line-height设为1或normal，并用vertical-align调整对齐
兼容性与渲染差异的真实影响
IE8+ 支持 inline-block，但 IE8 对 box-sizing 需要 -ms-box-sizing 前缀；不过真正麻烦的是 Safari 旧版本（
现代项目中，最大的兼容隐患不是语法不支持，而是不同引擎对“空白字符是否生成匿名 inline-box”的判定差异。
- HTML 中的换行和缩进，在某些 Safari 版本里会被渲染为真实空格，导致间隙；压缩 HTML 或移除标签间换行可规避
-
box-sizing: border-box在所有现代浏览器中行为统一，但要注意：它只改变宽高的计算方式，不影响margin（margin 始终在盒外） - 调试时优先用开发者工具的 Layout 面板看 actual width/height，比肉眼判断更可靠
别指望 inline-block 能完全替代 flex；它的“错乱”往往不是 bug，而是你正在用错工具。真正难调的，永远是那些没被显式声明的默认行为。
