本文解析了 元素在 中因行内格式化上下文（inline formatting context）导致的不可见顶部空白问题，揭示其本质是 line-box 高度与字体继承差异所致，并提供 font-size: inherit 和 display: block 两种可靠解决方案。
本文解析了 `
在实际开发中，你可能会遇到这样一种看似“无端”的布局现象：明明为 <li> 设置了 padding: 0、为 <button></button> 清除了边框（border: none），但按钮上方仍残留一条细小的空白间隙，且 <li> 的黑色背景无法完全贴合按钮——如 JSFiddle 示例 所示。这个间隙并非来自 padding 或 margin，也不是 list-item 的默认样式残留，而是由 CSS 行盒（line box）的自动高度计算机制引发的典型问题。
根本原因在于： 验证这一点很简单：尝试降低按钮的 另一种更彻底的解决方式是脱离行内上下文：将按钮设为块级元素。此时它不再参与行盒计算，而是独占一行、高度由自身内容和盒模型直接决定，自然消除了 line-box 带来的高度偏差： ⚠️ 注意事项： 总结来说，这个“意外 padding”实为 CSS 行盒机制的自然体现。理解 <button></button> 默认为 inline-level 元素（在大多数浏览器中表现为 display: inline-block），当它作为 <div> 的子元素（而 <code><div> 默认为 block）嵌套在 <code><li> 中时，其渲染会参与父容器的行盒构建。此时，行盒高度由该行内所有 inline-level 子元素的 font-size、line-height、vertical-align 及基线（baseline）共同决定。关键点是：原生 <button></button> 在 Chrome 等浏览器中默认 font-size 小于其父级 <div> 或 <code><li>（例如 13.333px vs 16px），导致其所在行盒高度仍按较大字体撑开，但按钮背景色仅覆盖自身内容区域（即较小的 line-height 区域），从而在顶部/底部露出父容器的背景色——即我们看到的“空白”。font-size 或 line-height，空白会变大；反之，将按钮 font-size 显式设为 inherit，空白立即消失：ul.test li button {
background: red;
border: none;
font-size: inherit; /* ✅ 继承父级字体大小，对齐行盒高度 */
}ul.test li button {
background: red;
border: none;
display: block; /* ✅ 强制块级，绕过 inline layout 干扰 */
}
vertical-align: top/bottom/middle 也可临时缓解（因调整基线对齐），但属“治标”，未解决根本的高度不一致； font-size: inherit + 显式 line-height 控制； margin 或负 margin 修复——这属于 hack，易受字体、缩放、浏览器版本影响。inline-level 元素在块容器中的渲染逻辑，比记忆 CSS 重置规则更重要。推荐在涉及按钮、输入框等表单控件嵌套布局时，主动声明 font-size: inherit 或根据语义选择 display: block / display: flex，从源头规避此类视觉陷阱。
