Bagaimanakah Ketinggian Garis Berinteraksi dengan Aksara Teks dan Penyampaian Penyemak Imbas?

Adakah Ketinggian Garis Bergantung pada Teks Watak?

<p>blah_blah</p><p></p><p></p><p>qypj;,</p>

> ;

Apabila menetapkan ketinggian garisan kepada 1 dalam CSS, tingkah laku mungkin berbeza-beza merentas pelayar. Contoh ini, yang diberikan dalam Firefox, menunjukkan bahawa garis bawah dalam baris pertama tidak muncul, manakala dalam baris ketiga, mereka muncul. Penyemak imbas lain dan snippet runner memaparkan garis bawah dalam kedua-dua kes.

Gelagat Mana Yang Betul?

Pelayar dan fon yang berbeza boleh mempengaruhi pengiraan ketinggian garisan. Ia bukan semata-mata bergantung pada sifat ketinggian garis.

Bolehkah Watak Mengubah Ketinggian Baris?

Tidak, aksara sahaja tidak boleh mengubah ketinggian baris. Walau bagaimanapun, aksara tertentu, seperti "p", "g" dan "j", mungkin memanjang di bawah garis dasar dan menyumbang kepada ruang menegak yang diperlukan untuk garisan.

Implikasi ketinggian garisan: 1

Menetapkan ketinggian garisan kepada 1 tidak menjamin bahawa sebarang teks akan muat dalam ruang yang ditetapkan. Ia hanya menyatakan bahawa kotak baris hendaklah sama persis dengan saiz fon.

Kawasan Kandungan lwn. Kotak Baris

Sifat fon menentukan kawasan kandungan, manakala baris -ketinggian mengawal kotak garisan. Kami tidak boleh mengawal kawasan kandungan tetapi boleh melaraskan kotak baris untuk memuatkan teks.

Contoh:

span {
latar belakang: merah;
warna: #fff;
saiz fon: 20px;
keluarga fon: monospace;
}

badan {
jidar: 10px 0;
atas sempadan: 1px pepejal;
sempadan-bawah: 1px pepejal;
animasi: tukar 2s linear ganti tak terhingga;
}

@ubah bingkai kunci {
daripada {

line-height: 0.2

}

hingga {

line-height: 2

}
}

blah_blah<br>

Dalam contoh ini, kawasan kandungan span kekal malar, tetapi kotak garisan mengembang dan mengecut apabila ketinggian garisan berubah. Ini menunjukkan kawalan bebas bagi kawasan kandungan dan kotak baris.

Atas ialah kandungan terperinci Bagaimanakah Ketinggian Garis Berinteraksi dengan Aksara Teks dan Penyampaian Penyemak Imbas?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!