当按钮内文字字体变小后，父级 div 高度未随之缩小，是因为默认块级元素的行高（line-height）和基线对齐（vertical-align）导致内部存在隐式空白空间；通过调整父容器 display 类型或启用 flex 布局可消除该间隙。
当按钮内文字字体变小后，父级 div 高度未随之缩小，是因为默认块级元素的行高（line-height）和基线对齐（vertical-align）导致内部存在隐式空白空间；通过调整父容器 display 类型或启用 flex 布局可消除该间隙。
在 CSS 中，<button> 是替换元素（replaced element），其内部文本默认受 line-height 和 vertical-align: baseline 影响。即使你将 <div> 的 font-size 设为 5px，包裹它的按钮仍会继承浏览器默认的 line-height（通常约为 1.2），并按基线对齐方式在行框中预留垂直空间——这部分空间会向上/向下延伸，导致父 <div>（默认 display: block）计算高度时包含这段“不可见但占位”的行内上下文，从而无法紧密包裹按钮。
以下是三种可靠解决方案：
✅ 方案一：设置父容器为 inline-block（推荐）
<div style={{ border: "1px solid red", display: "inline-block" }}>
<button style={{ border: "1px solid green", padding: "0", fontSize: "5px" }}>
My Text
</button>
</div>inline-block 元素会根据内容尺寸自然收缩，且不破坏文档流，能精准匹配子元素（按钮）的实际渲染高度。
✅ 方案二：启用 Flex 布局（如原问题中发现的解法）
<div style={{ border: "1px solid red", display: "flex", alignItems: "flex-start" }}>
<button style={{ border: "1px solid green", padding: "0", fontSize: "5px" }}>
My Text
</button>
</div>Flex 容器默认忽略行内格式化上下文，子项高度由自身盒模型决定；添加 alignItems: "flex-start" 可避免因默认 stretch 导致的意外拉伸。
✅ 方案三：重置按钮的行高与对齐方式（辅助优化）
button {
font-size: 5px;
line-height: 1; /* 消除默认行高冗余 */
vertical-align: top; /* 避免基线对齐产生的底部间隙 */
}配合 display: inline-block 或 flex 使用效果更稳定。
⚠️ 注意事项：
- 不要仅依赖 padding: 0 或 margin: 0，因为间隙主要来自行框（line box）而非盒模型边距；
- 避免使用 float 或 position: absolute 等脱离文档流的方式，除非有特殊布局需求；
- 在真实项目中，建议用 CSS 类替代内联样式，并统一重置按钮默认样式（如 appearance: none、border: none 等）以提升一致性。
总结：父容器不收缩的本质是 CSS 行内格式化上下文的默认行为，而非 bug。理解 display 值对盒模型的影响（尤其是 block vs inline-block vs flex），并主动控制 line-height 和 vertical-align，是解决此类“视觉留白”问题的关键。
