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?
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
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 menyatakanhanya 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.
Anda akan teragak-agak untuk menambahmargin-top: 10pxpada kod sebelumnya jika jidar tidak diruntuhkan, kerana mana-mana pasangan perenggan akan berjarak 20px, manakala perenggan hanya 10px selain elemen lain.
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 perengganmargin-bottom: 10px