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コードは次のとおりです。

line-height: 6px; div要素とline-height: inherit; span要素に。このようにして、 divの高さは、スケーリングされたspan高さとまったく一致します。

（元のテキストで提供されているHTMLコードスニペットが欠落していることに注意してください<span></span>要素は、問題と解決策を完全に示すことはできません。完全なHTMLコードを含める必要があります<span></span>要素とそのスタイルによるソリューションを効果的に検証することによってのみ。 ））

以上がCSSレイアウトパズル：スケーリング後に親要素の高さを子要素の高さに適応させる方法は？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。