css 布局挑战：父元素高度如何响应缩放后的子元素？
本文分析一个常见的 CSS 布局问题：一个内联块级 div 元素包含一个同样是内联块级的 span 元素，span 元素应用了 transform: scale(0.5) 进行缩放，导致其视觉高度变为 6px，但父级 div 的高度并未随之调整，仍然保持较大值（例如 22.5px）。如何让父元素高度准确适应缩放后的子元素高度？
问题根源在于 transform: scale() 改变的是元素的视觉呈现，而非其实际占据的空间。因此，父元素高度仍由 span 的原始高度决定。
解决方案：巧妙运用 line-height 属性。
立即学习“前端免费学习笔记（深入）”；
通过设置父级 div 的 line-height 为 6px（缩放后 span 的高度），并让 span 继承该 line-height，即可解决问题。
修改后的 CSS 代码如下：
为 div 元素添加 line-height: 6px;，并为 span 元素添加 line-height: inherit;。 这样，div 的高度将精确匹配缩放后的 span 高度。
(请注意，原文提供的html代码片段缺失元素，无法完整演示问题和解决方案。 完整的HTML代码应该包含元素及其样式，才能有效验证解决方案。)
© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
