Bagaimanakah Ketinggian Garis Mempengaruhi Ketinggian Kotak Kandungan HTML?

DDD
Lepaskan: 2024-11-10 08:46:02
asal
397 orang telah melayarinya

How Does Line-Height Affect the Height of HTML Content-Boxes?

Memahami Ketinggian Kandungan-Kotak dalam Elemen HTML

Dalam HTML, elemen boleh dikategorikan sebagai elemen blok atau elemen sebaris. Ketinggian kotak kandungan mereka, atau kawasan yang mereka duduki pada skrin, ditentukan oleh peraturan yang berbeza.

Elemen Sekat

Elemen Sekat, seperti div dan p, ketinggiannya ditentukan terutamanya oleh sifat ketinggian garisan mereka. Jika ketinggian garis ditetapkan kepada nilai seperti 2em, ketinggian kotak kandungan akan menjadi dua kali ketinggian ketinggian garis.

Tingkah laku ini konsisten merentas semua elemen blok, seperti yang digambarkan dalam contoh berikut:

<div>
Salin selepas log masuk

Elemen Sebaris

Tidak seperti elemen blok, elemen sebaris, seperti span, tidak mempunyai sifat ketinggian. Sebaliknya, dimensi menegaknya diperoleh daripada sifat fonnya. Spesifikasi tidak mentakrifkan secara eksplisit cara UA harus menentukan ketinggian kotak kandungan elemen sebaris, tetapi ia biasanya menggunakan ukuran em-box atau ascender/descender fon.

Ini bermakna walaupun anda boleh menetapkan garisan- ketinggian pada elemen sebaris, ia tidak menjejaskan ketinggian mereka secara langsung. Ketinggian akan berbeza-beza berdasarkan fon dan saiz fon yang digunakan, seperti yang ditunjukkan di bawah:

<span>
Salin selepas log masuk

Atas ialah kandungan terperinci Bagaimanakah Ketinggian Garis Mempengaruhi Ketinggian Kotak Kandungan HTML?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
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
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan