Mengapa Div Blok Sebaris Kosong Mempunyai Ketinggian?

Mengapa Inline-Block Menetapkan Ketinggian untuk Div ​​Kosong

Apabila elemen div kosong diberikan sifat paparan "inline-block," ia secara tidak dijangka mempamerkan peningkatan ketinggian, fenomena yang tidak berlaku dengan "display:block." Tingkah laku yang seolah-olah paradoks ini berpunca daripada ciri-ciri sedia ada pemformatan blok sebaris.

Pengiraan Ketinggian Garisan dalam Blok Sebaris

Setelah menetapkan elemen kepada blok sebaris, pengiraan ketinggian garisan mengalami penjelmaan. Daripada menjajarkan asas teks dalam, blok sebaris menjajarkan bahagian bawah, atas atau kedua-duanya.

Ketinggian Garisan untuk Blok Sebaris Kosong

Untuk elemen blok sebaris kosong , pengiraan ketinggian garisan diperoleh daripada metrik fon yang dikaitkan dengan elemen. Walau bagaimanapun, memandangkan tiada kandungan teks, ini menyebabkan elemen menganggap ketinggian garis asas berdasarkan saiz fon yang diwarisi daripada elemen induknya (biasanya badan).

Membetulkan Sebaris Kosong- Ketinggian Blok

Untuk menghapuskan ketinggian yang tidak diingini yang disebabkan oleh ketinggian garis yang diwarisi, seseorang boleh menggunakan elemen pembalut yang secara eksplisit menetapkan saiz fon kepada 0, dengan berkesan membatalkan sebarang pengiraan ketinggian garis:

.wrapper {
    font-size: 0;
}

.wrapper div {
    font-size: medium;
}

Kemas kini: Ketinggian Blok Sebaris Kosong

Adalah penting untuk ambil perhatian bahawa ketinggian elemen blok sebaris kosong tidak mempunyai dokumentasi rasmi. Walau bagaimanapun, pemerhatian mendedahkan corak.

Tempahan Ruang Talian Minimum

Elemen blok sebaris nampaknya menempah ruang garisan minimum tanpa mengira kandungannya. Ruang ini adalah berdasarkan ketinggian garis yang diwarisi daripada elemen induk.

Implikasi

Tingkah laku ini menunjukkan bahawa blok sebaris sememangnya mengharapkan kandungan dan menyimpan ruang baris lalai untuknya, walaupun ia kosong. Walaupun ini bercanggah dengan spesifikasi W3 untuk kotak garis kosong berketinggian sifar, ia adalah ciri khusus untuk pemformatan blok sebaris.

Atas ialah kandungan terperinci Mengapa Div Blok Sebaris Kosong Mempunyai Ketinggian?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!