Runtuh margin CSS: Kenapa margin saya bergerak elemen induk?

Penjelasan terperinci mengenai keruntuhan margin CSS: CLEVERLY menyelesaikan masalah margin

Apabila belajar susun atur CSS, atribut margin sering membawa beberapa hasil yang tidak dijangka, terutamanya fenomena "runtuh margin". Artikel ini akan menggunakan kes untuk menganalisis sebab -sebab dan penyelesaian runtuh margin.

Soalan: Andaikan dalam satu<canvas></canvas> Bersarang elemen di dalam<div> elemen (id adalah "satu"), dan tetapkan <code>margin-top untuk "satu". Anehnya, selepas menetapkan margin-top , bukan hanya elemen "satu" yang dipindahkan ke bawah,<canvas></canvas> Unsur ini juga bergerak ke bawah.

Struktur kod (dipermudahkan):

Html: <canvas><div id="one">...</div></canvas>

CSS: #one { margin-top: 20px; } (Gaya lain ditinggalkan di sini)

Analisis: Ini adalah keruntuhan margin CSS. Apabila ketinggian elemen induk adalah auto , elemen kanak-kanak adalah elemen tahap blok, dan elemen induk tidak mempunyai padding dan border , ketinggian elemen induk akan dipengaruhi oleh margin-top elemen kanak-kanak.<canvas></canvas> Ketinggian elemen dikira secara automatik, sementara "satu" adalah elemen tahap blok, margin-top dan<canvas></canvas> Margin atas<canvas></canvas> Ketinggian badan meningkat, sehingga bergerak ke bawah secara keseluruhan.

Penyelesaian: Terdapat beberapa cara untuk mengelakkan keruntuhan margin:

1. Tetapkan ketinggian elemen induk:<canvas></canvas> Unsur ini menentukan nilai ketinggian yang jelas, contohnya height: 100px; .
2. Tambah sempadan atau margin dalaman: Tambah border atau padding ke elemen induk, seperti border: 1px solid #ccc; atau padding: 10px; .
3. Gunakan margin dalaman dan bukannya margin luar: Gantikan margin-top dengan padding-top .
4. Gunakan kedudukan terapung atau mutlak: Tetapkan float: left; atau position: absolute; Untuk elemen kanak -kanak "satu".

Dengan memahami mekanisme runtuh margin, kita dapat mengawal susun atur CSS dan mengelakkan masalah yang sama.