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代碼片段缺失<span></span>元素，無法完整演示問題和解決方案。 完整的HTML代碼應該包含<span></span>元素及其樣式，才能有效驗證解決方案。 )

以上是CSS佈局難題：如何使父元素高度自適應縮放後的子元素高度？的詳細內容。更多資訊請關注PHP中文網其他相關文章！