Teka -teki susun atur CSS: Bagaimana untuk menjadikan ketinggian elemen induk menyesuaikan diri dengan ketinggian elemen kanak -kanak selepas berskala?

Cabaran Layout CSS: Bagaimanakah ketinggian elemen induk bertindak balas terhadap unsur -unsur kanak -kanak yang berskala?

Artikel ini menganalisis masalah susun atur CSS yang biasa: Unsur div peringkat blok sebaris mengandungi elemen span yang juga merupakan tahap blok. Unsur span diperkuat dengan transform: scale(0.5) , menyebabkan ketinggian visualnya menjadi 6px, tetapi ketinggian div induk tidak diselaraskan dengan sewajarnya dan tetap besar (contohnya, 22.5px). Bagaimana cara menyesuaikan ketinggian elemen induk ke ketinggian elemen kanak -kanak yang berskala?

Penyebab utama masalah terletak pada transform: scale() mengubah persembahan visual unsur, bukan ruang yang sebenarnya diduduki. Oleh itu, ketinggian elemen induk masih ditentukan oleh ketinggian asal span .

Penyelesaian: Pandai menggunakan atribut line-height .

Masalahnya dapat diselesaikan dengan menetapkan line-height div induk hingga 6px (ketinggian span selepas berskala) dan membiarkan span mewarisi line-height .

Kod CSS yang diubahsuai adalah seperti berikut:

Tambah line-height: 6px; kepada elemen div dan line-height: inherit; ke elemen span . Dengan cara ini, ketinggian div akan sesuai dengan ketinggian span skala.

(Sila ambil perhatian bahawa coretan kod HTML yang disediakan dalam teks asal tiada<span></span> Unsur -unsur, tidak dapat menunjukkan sepenuhnya masalah dan penyelesaian. Kod HTML yang lengkap harus mengandungi<span></span> Hanya dengan mengesahkan penyelesaian dengan berkesan oleh unsur -unsur dan gaya mereka. )

Atas ialah kandungan terperinci Teka -teki susun atur CSS: Bagaimana untuk menjadikan ketinggian elemen induk menyesuaikan diri dengan ketinggian elemen kanak -kanak selepas berskala?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!