Bagaimana untuk Mengelakkan Margin-Top daripada Menjejaskan Elemen Induk Tanpa Sempadan?

Selesaikan masalah CSS Margin-top dalam elemen induk tanpa sempadan

Apabila elemen induk tidak mempunyai sempadan atas, margin- bagi bahagian atas elemen anak boleh menyebabkan elemen induk bergerak ke bawah. Masalah ini boleh diselesaikan dengan menambahkan sempadan atas pada elemen induk, tetapi ini bertentangan dengan keperluan asal.

Walau bagaimanapun, terdapat penyelesaian alternatif yang menghalang perkara ini daripada berlaku:

Gunakan limpahan:auto kepada elemen induk

dengan menambahkan limpahan: Dengan digunakan secara automatik pada elemen induk, anda boleh memaksa bekasnya untuk mengandungi kandungannya, sekali gus mengelakkan keruntuhan margin. Margin-collapsing ialah tingkah laku dalam CSS yang menggabungkan jidar bersebelahan menjadi satu jidar.

Dalam contoh yang diberikan, anda boleh menambah CSS berikut pada kelas .body:

.body {
  overflow: auto;
}

Ini akan menghentikan margin-top daripada menyebabkan .body bergerak ke bawah sambil mengekalkannya bingkai jelas atas.

Rujukan

• [Spesifikasi W3C CSS2: Margin Runtuh](http://www.w3.org/TR/CSS2/box.html# runtuh -margin)

Atas ialah kandungan terperinci Bagaimana untuk Mengelakkan Margin-Top daripada Menjejaskan Elemen Induk Tanpa Sempadan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!