CSS layout puzzle: How to make the parent element height adaptive to the child element height after scaling?

CSS layout challenge: How does the parent element height respond to the scaled child elements?

This article analyzes a common CSS layout problem: an inline block-level div element contains a span element that is also inline block-level. span element is scaled by transform: scale(0.5) , causing its visual height to become 6px, but the height of the parent div has not been adjusted accordingly and remains large (for example, 22.5px). How to accurately adapt the height of the parent element to the height of the scaled child element?

The root cause of the problem lies in transform: scale() changes the visual presentation of the element, not the space it actually occupies. Therefore, the parent element height is still determined by the original height of span .

Solution: Cleverly use line-height attribute.

The problem can be solved by setting line-height of the parent div to 6px (the height of span after scaling) and letting span inherit the line-height .

The modified CSS code is as follows:

Add line-height: 6px; to the div element and line-height: inherit; to the span element. In this way, the height of div will exactly match the scaled span height.

(Please note that the HTML code snippet provided in the original text is missing<span></span> Elements, cannot fully demonstrate the problem and solution. The complete HTML code should contain<span></span> Only by effectively verifying the solution by elements and their styles. )

The above is the detailed content of CSS layout puzzle: How to make the parent element height adaptive to the child element height after scaling?. For more information, please follow other related articles on the PHP Chinese website!