本文解析 在 内部产生顶部/底部空白的根本原因——并非 padding 或 list-style，而是行内格式化上下文（inline formatting context）中 line-box 高度计算与字体继承差异所致，并提供 font-size: inherit 和 display: block 两种可靠修复方案。
本文解析 `
在实际开发中，你可能遇到这样一种“神秘留白”：明明已将 <li> 的 padding 设为 0、移除了 <button></button> 的 border，但 <li> 背景（如黑色）仍无法完全贴合按钮（如红色）的上下边缘，总有一条细小的空白缝隙。这并非浏览器 bug，而是 CSS 行盒（line box）高度计算机制的自然体现。
根本原因在于：<button></button> 是替换元素（replaced element），其默认 font-size 在不同浏览器中可能与父容器不一致（例如 Chrome 中 <button></button> 默认 font-size: medium，而 <div> 或 <code><li> 可能继承自根元素的 16px）。当 <button></button> 作为 inline-level 元素存在于 <div> 内时，该 <code><div> 会为其创建一个 line box。line box 的高度由其内部所有 inline-level 子元素的 <code>font-size、line-height、vertical-align 等共同决定。由于按钮字体尺寸偏小，它占据的 line box 高度小于父 <div> 的行高基准，而 <code><div> 的背景（或 <code><li> 的背景）会按完整 line box 渲染，从而在按钮上下方“露出”未被填充的区域。
以下两种方案可彻底消除该间隙，且各有适用场景：
✅ 方案一：统一字体继承（推荐用于保持内联布局）
强制按钮继承父级字体设置，使 line box 高度与内容对齐：
ul.test li button {
background: red;
border: none;
font-size: inherit; /* 关键：继承父 div/li 的 font-size */
line-height: inherit; /* 可选：进一步确保行高一致 */
}✅ 方案二：切换为块级显示（适用于需独占一行的按钮）
将按钮设为 display: block，使其脱离 inline formatting context，不再参与 line box 计算：
ul.test li button {
background: red;
border: none;
display: block; /* 关键：脱离行内流，高度由自身 content 决定 */
}⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
- 不要依赖
vertical-align: top/bottom/middle临时“掩盖”问题——它仅调整对齐位置，不解决 line box 高度冗余； - 避免盲目重置
line-height: 1，可能引发文字截断或可访问性问题； - 若项目使用 CSS Reset 或 Normalize.css，需留意其对
<button></button>的font-size是否做了特殊处理； - 在响应式设计中，建议优先采用
font-size: inherit方案，以保持按钮在不同容器中的尺寸一致性。
总结：这个“意外 padding”本质是 CSS 视觉格式化模型的必然表现。理解 line box 的形成逻辑，比记忆 hack 更重要——掌握 font-size 继承与 display 切换，即可精准控制按钮在任意嵌套结构中的视觉贴合度。
