Mengapakah Margin-Top Diabaikan pada Elemen HTML Sebaris?

Margin dalam HTML5 - Mengapa Margin-Top Diabaikan untuk Elemen Sebaris

Dalam HTML5, beberapa elemen seperti span dikelaskan sebagai elemen sebaris, manakala yang lain seperti div dan p ialah elemen peringkat blok. Klasifikasi ini memberi kesan kepada cara margin digunakan pada elemen ini.

Memahami Elemen Sebaris

Elemen Sebaris direka bentuk untuk mengalir secara semula jadi dalam baris teks. Mereka menduduki ruang menegak minimum yang mungkin diperlukan untuk memaparkan kandungan mereka. Akibatnya, margin menegak tidak terpakai kepada mereka. Apabila anda menggunakan margin-atas pada elemen sebaris seperti span, ia hanya diabaikan.

Penyelesaian: Inline-Block atau Block Display

Untuk memberikan elemen sebaris seperti span margin di bahagian atas, anda mempunyai dua pilihan:

• Paparan: inline-block: Tetapan ini menjadikan elemen berkelakuan seperti elemen blok tetapi masih membenarkan ia mengalir dalam baris teks. Ia menyokong kedua-dua jidar mendatar dan menegak.
• Paparan: blok: Tetapan ini menukar elemen kepada elemen peringkat blok, membolehkannya menduduki keseluruhan ruang menegak dan mendatar yang tersedia. Walau bagaimanapun, ia akan memaparkan elemen pada baris baharu.

Contoh

Pertimbangkan kod HTML dan CSS berikut:

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