CSS布局難題：如何使父元素高度自適應縮放后的子元素高度？

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代碼應該包含元素及其樣式，才能有效驗證解決方案。)