Mengapakah Margin-Top Berfungsi pada Inline-Block tetapi Bukan Elemen Sebaris?

Gelagat Margin dalam Elemen Inline dan Inline-Block

Dalam CSS, gelagat gaya margin boleh berbeza-beza bergantung pada sifat paparan sesuatu unsur. Soalan ini meneroka perbezaan antara gelagat margin atas dalam elemen sebaris dan blok sebaris.

Elemen Sebaris

Dalam kod yang diberikan, elemen h1 pada mulanya ditetapkan kepada paparan: sebaris. Menurut spesifikasi CSS2, elemen sebaris diformatkan sebagai satu atau lebih kotak sebaris. Kotak ini dibentangkan secara mendatar dan hanya menghormati jidar mendatar (cth., jidar kiri dan kanan). Akibatnya, sifat margin atas diabaikan.

Elemen Blok Sebaris

Apabila sifat paparan ditukar kepada blok sebaris, elemen h1 menjadi bekas blok sebaris. Ini bermakna ia berkelakuan seperti elemen blok dalam bekasnya sambil mengekalkan aliran sebaris. Elemen blok menghormati kedua-dua jidar mendatar dan menegak, termasuk jidar atas. Oleh itu, apabila paparan ditetapkan kepada sekatan sebaris, sifat atas margin digunakan seperti yang dijangkakan.

Kesimpulan

Perbezaan dalam tingkah laku jidar antara sebaris dan sebaris -elemen blok berpunca daripada perbezaan susun atur asasnya. Elemen sebaris dibentangkan secara mendatar dan hanya menghormati jidar mendatar, manakala unsur blok sebaris diformatkan seperti blok dan menghormati kedua-dua jidar mendatar dan menegak. Pemahaman ini penting untuk mengawal kedudukan elemen dalam reka letak CSS.

Atas ialah kandungan terperinci Mengapakah Margin-Top Berfungsi pada Inline-Block tetapi Bukan Elemen Sebaris?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!