Mengapakah `display: inline-block` Mencipta Jurang Di Atas Div Tersembunyi?

Mengapa Inline-Block Menambah Ketinggian pada Div Tersembunyi

Apabila menggunakan paparan: inline-block pada

elemen, seseorang mungkin menghadapi jurang yang tidak dijangka di atas elemen apabila ia mengandungi elemen disembunyikan. Tingkah laku ini tidak berlaku dengan paparan: blok.

Mengapa Ini Berlaku?

paparan: blok sebaris menukar pengiraan ketinggian garis. Dalam konteks pemformatan sebaris, ketinggian elemen blok sebaris adalah berdasarkan sifat 'tinggi garis' mereka. Untuk elemen blok sebaris kosong, ini diterjemahkan kepada ketinggian garis asasnya, walaupun ia tidak mempunyai kandungan yang boleh dilihat.

Menaakul Di Sebalik Jurang

Oleh itu, kosong blok sebaris menyimpan ruang garisan minimum berdasarkan ketinggian garisan yang diwarisi, biasanya daripada unsur. Ruang tersimpan ini menjelma sebagai jurang di atas elemen apabila bekasnya tidak kelihatan.

Pembetulan Pantas

Untuk menghapuskan jurang ini, penyelesaian pantas adalah dengan membalut baris sebaris -elemen blok dalam pembalut yang secara eksplisit menetapkan saiz fon: 0. Ini memastikan bahawa tiada fon dan ketinggian baris, menyebabkan tiada ketinggian untuk blok sebaris kosong.

Kemas kini

Ketinggian elemen blok sebaris kosong tidak ditakrifkan secara eksplisit dalam dokumentasi rasmi. Walau bagaimanapun, berdasarkan ujian, ia boleh difahami seperti berikut:

• Ruang Kosong: Elemen blok sebaris menyimpan kotak baris untuk kandungan berpotensi.
• Ketinggian Garisan Diwarisi: Kotak garisan ini berdasarkan ketinggian garisan yang diwarisi daripada elemen induk, termasuk elemen.
• Ruang Baris Minimum: Walaupun blok sebaris kosong tidak wujud secara teknikal untuk tujuan pemformatan, mereka masih menyimpan ruang baris minimum.

Atas ialah kandungan terperinci Mengapakah `display: inline-block` Mencipta Jurang Di Atas Div Tersembunyi?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

for using Property this display

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn