Bagaimanakah Ketinggian Garisan Mempengaruhi Ketinggian Elemen Sebaris dan Kotaknya?

Ketinggian Garisan dalam Elemen Sebaris

Menentukan mekanik ketinggian garisan dalam elemen sebaris boleh menjadi rumit. Berikut ialah penjelasan yang mendalam untuk menjelaskan nuansa:

Ketinggian Kotak Sebaris

Elemen sebaris mencipta kotak sebaris yang ditakrifkan mengikut ketinggian garisan:

The height of the inline box encloses all glyphs and their
half-leading on each side and is thus exactly 'line-height'.

Jadi, jika anda menetapkan ketinggian garis kepada 15px untuk elemen sebaris, ketinggian kotaknya ialah 15px.

Ketinggian Kotak Garisan

Walau bagaimanapun, kotak garisan yang merangkumi kotak sebaris juga mempunyai ketinggian yang ditentukan:

The height of a line box is determined by the rules given in the
section on line height calculations.

Untuk kotak sebaris dengan ketinggian garisan dan penjajaran menegak yang sama, ketinggian kotak garisan sama dengan ketinggian garisan. Jadi, dalam kes ini, ketinggian kotak baris juga ialah 15px.

Ketinggian Kawasan Kandungan Kotak Sebaris

Alat pembangun penyemak imbas selalunya memaparkan ketinggian daripada kawasan kandungan dalam kotak sebaris. Ketinggian ini biasanya ditentukan oleh penaik dan penurunan maksimum fon:

The height of the content area should be based on the font, but this
specification does not specify how.

Akibatnya, ketinggian kawasan kandungan boleh berbeza-beza dan mungkin lebih besar daripada ketinggian garis, walaupun apabila saiz fon ditetapkan pada nilai yang sama dengan ketinggian garis.

Ringkasnya, pelbagai ketinggian yang dikaitkan dengan elemen sebaris termasuk:

• Ketinggian kotak sebaris ditentukan oleh ketinggian garisan.
• Ketinggian kotak garisan juga ditentukan oleh ketinggian garisan untuk kotak sebaris dengan ketinggian garisan dan penjajaran menegak yang sama .
• Ketinggian kawasan kandungan ditentukan oleh penaik dan penurunan maksimum fon.

Atas ialah kandungan terperinci Bagaimanakah Ketinggian Garisan Mempengaruhi Ketinggian Elemen Sebaris dan Kotaknya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!