Mengapakah div blok sebaris kosong mendapat ketinggian dalam bekas tersembunyi?

Apabila menggunakan blok sebaris, elemen div sebaris kosong dalam bekas tersembunyi secara ingin tahu mendapat ketinggian. Mengapa ini berlaku, berbeza dengan tingkah laku display:block?

Paparan:inline-block memberikan pemformatan khusus pada elemen:

• Inline-Level Formatting: Elemen diletakkan keluar secara mendatar dalam blok bekas.
• Pengiraan Ketinggian Garisan: Ketinggian garisan dikira secara berbeza untuk elemen sebaris. Untuk elemen blok sebaris, ia menjadi ketinggian kotak margin. Untuk elemen sebaris biasa, ia ialah sifat 'ketinggian garis'.

Apabila elemen blok sebaris kosong, ia menganggap ketinggian garis asasnya, walaupun tiada kandungan fon atau teks. Ini menyebabkan elemen memperoleh ketinggian yang kecil tetapi ketara, walaupun keadaannya kosong.

Penyelesaian untuk mengelakkan isu ketinggian ini adalah dengan menggunakan pembalut dengan saiz fon:0 untuk menghapuskan pengiraan ketinggian garis:

.wrapper {
    font-size: 0;
}

.wrapper div {
    font-size: medium;
   
}

Kemas kini: Memahami Ketinggian Blok Sebaris

Bertentangan dengan andaian awal, ketinggian tepat elemen blok sebaris kosong tidak didokumenkan secara rasmi. Walau bagaimanapun, pemerhatian dan ujian mencadangkan bahawa:

• Blok sebaris menyimpan ruang garisan minimum berdasarkan ketinggian garis yang diwarisi, biasanya ditentukan oleh elemen.
• Ruang baris ini berterusan walaupun blok sebaris kosong dan secara teorinya harus dianggap sebagai ketinggian sifar mengikut spesifikasi CSS.

Atas ialah kandungan terperinci Mengapakah div blok sebaris kosong mendapat ketinggian dalam bekas tersembunyi?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!