Mengapakah `margin-top` Berfungsi dengan `inline-block` tetapi Bukan `inline` dalam CSS?

Menyingkap Percanggahan: Mengapa Margin-Top Berfungsi dengan Inline-Block tetapi Tidak Inline

Dalam bidang penggayaan CSS, interaksi antara sifat paparan dan gelagat margin kadangkala boleh membawa kepada senario yang membingungkan. Satu contoh sedemikian ialah kes aneh mengenai margin-top yang berfungsi dengan inline-block tetapi bukan inline.

Pertimbangkan coretan CSS berikut:

h1 {
    display: inline;
    margin-top: 25px;
}

Apabila digunakan pada elemen, pengisytiharan ini gagal mencipta margin atas. Walau bagaimanapun, jika sifat paparan ditukar kepada inline-block, margin-top tiba-tiba berkuat kuasa.

Untuk merungkai enigma ini, kami menyelidiki kedalaman spesifikasi CSS2. Menurut Bahagian 9.2.4, elemen blok sebaris menjana bekas blok peringkat sebaris, pada asasnya menganggap elemen sebagai kotak tahap sebaris atom. Sebaliknya, elemen sebaris menjana satu atau lebih kotak sebaris, seperti yang dinyatakan dalam Bahagian 9.2.4.

Yang penting, Bahagian 9.4.2 spesifikasi CSS2 menjelaskan bahawa elemen sebaris hanya menghormati jidar mendatar, tanpa mengambil kira jidar menegak. Elemen peringkat blok, sebaliknya, menghormati kedua-dua jidar mendatar dan menegak.

Oleh itu, percanggahan antara blok sebaris dan sebaris berpunca daripada kelakuan berbeza elemen sebaris dan blok. Elemen sebaris, seperti sebaris, hanya menghormati jidar mendatar kerana ia dibentangkan secara mendatar satu demi satu. Elemen blok sebaris, sebaliknya, dianggap secara berkesan sebagai blok, mempamerkan gelagat biasa elemen peringkat blok, termasuk keupayaan untuk menghormati jidar menegak seperti jidar atas.

Atas ialah kandungan terperinci Mengapakah `margin-top` Berfungsi dengan `inline-block` tetapi Bukan `inline` dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!