Mengapa Margin Atas Saya Runtuh Apabila Elemen Terapung Di Atasnya?

Mengapa Margin Atas Diabaikan Apabila Elemen Terapung Hadir

Ia sering diperhatikan bahawa margin atas elemen HTML diabaikan jika terdapat unsur terapung mendahuluinya. Tingkah laku ini berpunca daripada spesifikasi CSS, yang menunjukkan bahawa "kotak blok tidak diposisikan yang dibuat sebelum dan selepas kotak apungan mengalir secara menegak seolah-olah apungan tidak wujud."

Dalam situasi sedemikian, elemen terapung tidak 't menyumbang kepada pengiraan margin atas. Akibatnya, elemen seterusnya kelihatan bersempadan dengan elemen terapung tanpa sebarang jarak.

Untuk membetulkan isu ini, pendekatan mudah ialah memperkenalkan elemen pembalut di sekeliling elemen berikutnya. Pembalut ini akan bertindak sebagai penimbal, memisahkan elemen terapung daripada kandungan yang dibalut.

Yang penting, jarak pembalut hendaklah dinyatakan sebagai pelapik dalaman dan bukannya jidar. Ini memastikan faktor luaran, seperti elemen terapung lain, tidak mengganggu jarak antara pembalut dan elemen terapung.

Untuk ilustrasi, pertimbangkan coretan HTML yang diubah suai berikut:

<div>

Dengan menggunakan pendekatan ini, anda boleh memastikan bahawa elemen seterusnya menghormati margin atas yang ditentukan, walaupun dengan kehadiran elemen terapung.

Atas ialah kandungan terperinci Mengapa Margin Atas Saya Runtuh Apabila Elemen Terapung Di Atasnya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!