Jidar runtuh CSS: apakah tujuannya?

Question

Model kotak CSS2 memberitahu kami bahawa jidar menegak bersebelahan akan runtuh.

Saya mendapati ini sangat menjengkelkan kerana ia adalah punca banyak kesilapan reka bentuk. Saya berharap dengan memahami tujuan meruntuhkan margin, saya akan memahami masa untuk menggunakannya dan cara mengelakkannya apabila tidak diperlukan.

Apakah tujuan ciri ini?

Answer 1

Maksud umum "margin" bukanlah untuk menyampaikan "gerakkan 10px" sebaliknya "mesti ada 10px ruang putih di sebelah elemen ini."

Saya sentiasa mendapati ini adalah yang paling mudah untuk dikonsepkan dalam perenggan.

Jika anda menyatakan

hanya untuk perenggan dan tiada margin pada mana-mana elemen lain, satu siri perenggan akan dijarakkan dengan cantik. Tetapi, sudah tentu, anda akan menghadapi masalah apabila anda meletakkan elemen lain di bawah perenggan. Kedua-duanya akan bersentuhan. margin-top: 10px

Anda akan teragak-agak untuk menambah

pada kod sebelumnya jika jidar tidak diruntuhkan, kerana mana-mana pasangan perenggan akan berjarak 20px, manakala perenggan hanya 10px selain elemen lain. margin-bottom: 10px

Jadi margin menegak akan runtuh. Dengan menambahkan 10 piksel jidar atas dan bawah, anda berkata: "Saya tidak mengambil berat tentang peraturan jidar untuk elemen lain. Saya memerlukan sekurang-kurangnya 10 piksel pelapik di atas dan di bawah setiap perenggan