当按钮内文字字体变小后，父级 div 高度未随之缩小，是因为默认块级元素的行高（line-height）和基线对齐（vertical-align）导致内部存在隐式空白空间；通过调整父容器 display 类型或启用 flex 布局可消除该间隙。

当按钮内文字字体变小后，父级 div 高度未随之缩小，是因为默认块级元素的行高（line-height）和基线对齐（vertical-align）导致内部存在隐式空白空间；通过调整父容器 display 类型或启用 flex 布局可消除该间隙。

在 CSS 中， 是替换元素（replaced element），其内部文本默认受 line-height 和 vertical-align: baseline 影响。即使你将

的 font-size 设为 5px，包裹它的按钮仍会继承浏览器默认的 line-height（通常约为 1.2），并按基线对齐方式在行框中预留垂直空间——这部分空间会向上/向下延伸，导致父

（默认 display: block）计算高度时包含这段“不可见但占位”的行内上下文，从而无法紧密包裹按钮。

以下是三种可靠解决方案：

✅ 方案一：设置父容器为 inline-block（推荐）

<div style="{{" border: solid red display:>
  <button style="{{" border: solid green padding: fontsize:>
    My Text
  </button>
</div>

inline-block 元素会根据内容尺寸自然收缩，且不破坏文档流，能精准匹配子元素（按钮）的实际渲染高度。

✅ 方案二：启用 Flex 布局（如原问题中发现的解法）

<div style="{{" border: solid red display: alignitems:>
  <button style="{{" border: solid green padding: fontsize:>
    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，是解决此类“视觉留白”问题的关键。