Mengapakah Margin-Top Tidak Berfungsi pada Elemen Sebaris tetapi Berfungsi pada Elemen Sekat Sebaris?

Inline vs. Inline-Block: Mengapa Margin-Top Hanya Berfungsi dengan Inline-Block

Soalan

Apabila menggunakan HTML dan CSS, a pengguna cuba membuat margin atas untuk

elemen, tetapi ia hanya muncul apabila paparan sifat CSS ditetapkan kepada sekatan sebaris, bukan apabila ia ditetapkan kepada sebaris.

Penjelasan

Spesifikasi CSS mentakrifkan perbezaan antara blok sebaris dan sebaris seperti berikut:

• blok sebaris: Mencipta bekas blok tahap sebaris di mana kandungan dalaman elemen diformatkan sebagai kotak blok dan elemen itu sendiri diformatkan sebagai kotak peringkat sebaris.
• sebaris: Menjana satu atau lebih kotak sebaris.

Yang penting, spesifikasi CSS2 menyatakan bahawa elemen sebaris hanya menghormati margin mendatar (cth., margin-left).

Perbezaannya

Perbezaannya terletak pada cara elemen sebaris dan sebaris-blok dirawat:

• Semasa sebaris elemen dianggap sebagai elemen sebaris benar, elemen blok sebaris dianggap sebagai blok, tetapi secara visual selaras dengan satu satu lagi.
• Elemen peringkat blok (seperti blok sebaris) menghormati kedua-dua jidar mendatar dan menegak, manakala elemen sebaris hanya menghormati jidar mendatar.

Resolusi

Oleh itu , dalam kes yang disediakan, tetapkan paparan kepada sebaris pada

elemen hanya menggunakan jidar mendatar, yang tidak termasuk jidar atas. Menetapkan paparan kepada sekatan sebaris, bagaimanapun, membolehkan kedua-dua jidar mendatar dan menegak digunakan, termasuk jidar atas.

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