Apakah Perbezaan Utama Antara `display:inline` dan `display:block` dalam CSS?

Memahami Nuansa paparan:sebaris lwn. paparan:blok

Dalam CSS, sifat paparan memainkan peranan penting dalam mengawal reka letak dan rupa unsur. Antara pelbagai nilainya, display:inline dan display:block ialah dua pilihan yang biasa digunakan dengan ciri yang berbeza.

Mari kita mendalami perbezaan asas antara dua nilai ini:

display:block

• Menunjukkan bahawa elemen akan berkelakuan sebagai blok.
• Mencipta ruang putih di atas dan di bawah elemen.
• Menghalang elemen HTML bersebelahan daripada diletakkan di sebelah, melainkan dibenarkan secara eksplisit (mis., melalui terapung).

paparan:dalam talian

• Letakkan elemen dalam blok semasa, menjajarkannya pada baris yang sama.
• Membentuk "blok tanpa nama" dengan lebar minimum apabila terletak di antara elemen blok.
• Mengekalkan status sebaris, membenarkan teks dan elemen lain mengalir di sekelilingnya.

Contoh: Menggambarkan Perbezaan

Pertimbangkan coretan kod berikut:

<span>

Dalam contoh ini, <span> elemen dengan paparan: paparan sebaris sebagai sebahagian daripada teks, manakala