Bagaimanakah Kanak-kanak `display: block` Mempengaruhi Reka Letak Induk `display: inline` dalam CSS?

Paparan: Sekat dalam Paparan: Sebaris

Dalam CSS, apabila elemen dengan paparan: blok ialah anak kepada elemen dengan paparan: sebaris, ia mewujudkan senario di mana ibu bapa menganggap beberapa ciri elemen blok. Ini berlaku kerana elemen blok memaksa pemecahan aliran sebaris induk. Walau bagaimanapun, terdapat perbezaan utama antara senario ini dan mentakrifkan induk sebagai paparan: blok.

Perbezaan daripada Paparan: Sekat

Mengikut spesifikasi CSS 2.1, perkara berikut perbezaan wujud apabila paparan:induk sebaris mengandungi paparan: anak blok:

1. Kotak Sekat Tanpa Nama:

   • Induk sebaris ialah berpecah kepada kotak blok tanpa nama di sekeliling kanak-kanak blok itu. Kotak ini melampirkan sebarang kandungan tanpa nama atau bukan tanpa nama sebelum dan selepas kanak-kanak.

2. Warisan Harta:

   • Hartanah digunakan pada induk sebaris masih menjejaskan kotak blok awanama yang dijana di sekeliling kanak-kanak itu. Contohnya, sempadan yang digunakan pada induk sebaris akan mengelilingi kandungan teks berpecah sebelum dan selepas kanak-kanak itu.

3. Gelagat Sempadan:

   • Sempadan di sekeliling perenggan sebaris adalah lebih sempit daripada sempadan di sekeliling perenggan blok. Jidar perenggan sebaris mengelilingi setiap baris teks, manakala sempadan perenggan blok menjangkau seluruh lebar halaman.

Sifat Terjejas

Spesifikasi CSS 2.1 dengan jelas menyebut bahawa sifat sempadan dipengaruhi oleh perbezaan antara paparan: sebaris dan paparan: blok dalam senario ini. Walau bagaimanapun, masih tidak jelas sama ada hartanah lain menunjukkan gelagat yang berbeza.

Atas ialah kandungan terperinci Bagaimanakah Kanak-kanak `display: block` Mempengaruhi Reka Letak Induk `display: inline` dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!