Mengapa Margin-Top Tidak Berfungsi pada Elemen Sebaris dalam HTML?-tutorial css-php.cn

Mengapa Margin-Top Tidak Berfungsi pada Elemen Sebaris dalam HTML?

Linda Hamilton

Lepaskan： 2024-12-16 17:51:12

asal

139 orang telah melayarinya

Why Doesn't Margin-Top Work on Inline Elements in HTML?

Margin-Top Tidak Berfungsi untuk Elemen Sebaris: Memahami Gelagat Sebaris

Dalam HTML, elemen seperti dianggap sebagai elemen sebaris, tidak seperti elemen peringkat blok seperti

atau

. Elemen peringkat blok boleh menerima jidar pada semua sisi, manakala elemen sebaris hanya membenarkan jidar mendatar.

Sifat jidar CSS menetapkan lebar kawasan jidar yang mengelilingi elemen. Apabila digunakan pada elemen peringkat blok, margin mempengaruhi keempat-empat sisi. Walau bagaimanapun, untuk elemen sebaris seperti , jidar menegak tidak berkesan.

Menurut spesifikasi CSS, "jidar menegak tidak akan mempunyai sebarang kesan pada elemen sebaris yang tidak diganti."

Penyelesaian:

Untuk membenarkan jidar menegak pada elemen sebaris seperti , ubah suai sifat paparannya kepada sama ada "blok sebaris" atau "blok."

Blok Sebaris:

Membenarkan elemen untuk berkelakuan sebaris, tetapi turut mendayakan jidar menegak.
Contoh:

Blok:

Menukar elemen kepada elemen peringkat blok, membenarkan jidar menegak dan mendatar.
Contoh :

Adalah disyorkan untuk menggunakan paparan: inline-block untuk elemen sebaris yang memerlukan jidar menegak, sebagai paparan: blok boleh menyebabkan elemen muncul pada baris yang berasingan.

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