Bagaimanakah saiz fon, ketinggian garisan dan ketinggian sebenar berinteraksi untuk menentukan ketinggian elemen dalam CSS?

Saiz Fon, Ketinggian Garis dan Ketinggian Sebenar Dinyahmistikan

Dalam CSS, memahami cara saiz fon dan ketinggian baris berkaitan dengan ketinggian unsur boleh menjadi satu cabaran. Artikel ini bertujuan untuk menafikan konsep ini dan menyediakan peraturan yang jelas untuk membimbing usaha penggayaan anda.

Saiz Fon: Mengandungi Aksara

Saiz fon, seperti namanya, menetapkan saiz fon, menentukan ketinggian kotak di mana semua aksara (termasuk ascenders dan descenders) mesti muat. Walau bagaimanapun, ia tidak menjejaskan ketinggian sebenar sesuatu elemen secara langsung.

Ketinggian Garisan: Membentuk Garisan

Ketinggian garisan mentakrifkan ketinggian kotak garisan, dengan berkesan menetapkan jarak menegak antara baris. Peranannya melangkaui jarak baris semata-mata. Dalam kes di mana ketinggian elemen sebaris tidak dinyatakan dengan jelas, ketinggian garisan menjadi ketinggian lalai bagi elemen sebaris itu.

Ketinggian Sebenar: Satu Akta Pengimbangan

ketinggian sebenar sesuatu elemen dipengaruhi oleh beberapa faktor:

• Ketinggian garisan kotak garisan: Ketinggian kotak garisan biasanya ditentukan oleh ketinggian garisan kandungannya. Walau bagaimanapun, jika blok induk juga mempunyai ketinggian garis, nilai itu akan dimainkan. Ketinggian garisan blok induk menetapkan ketinggian minimum untuk kotak garisan, memastikan terdapat ruang yang mencukupi untuk potensi penaik dan penurunan.
• Ketinggian garisan elemen sebaris: Jika elemen sebaris ketinggian tidak ditentukan, ketinggian garisan menjadi ketinggian lalainya. Walau bagaimanapun, jika ketinggian garisan elemen sebaris lebih kecil daripada blok induk, ketinggian sebenarnya akan lebih kecil daripada ketinggian kotak garisan.
• Jalur menegak: Sifat ini menentukan penjajaran menegak elemen sebaris dalam kotak garisan. Contohnya, menjajarkan elemen sebaris ke bahagian atas kotak garisan akan menghasilkan ketinggian sebenar yang sama dengan ketinggian garis elemen sebaris.

Contoh: Memecah Ketinggian

Pertimbangkan rentang dengan saiz fon 40px dan ketinggian garis 40px. Secara intuitif, seseorang mungkin menjangkakan span mempunyai ketinggian sebenar 40px. Walau bagaimanapun, disebabkan watak naik, ketinggian sebenar sebaliknya mengukur sebagai 45px. Ini kerana penyemak imbas memperuntukkan ruang tambahan di atas dan di bawah penaik dan penurunan untuk memastikan ia muat dalam kotak garisan, yang mempunyai ketinggian 40px berkat sifat ketinggian garis.

Pertimbangan Tambahan:

• Jika ketinggian garisan elemen sebaris lebih kecil daripada saiz fonnya, ketinggian sebenar akan lebih kecil daripada ketinggian kotak garisan.
• Sebaliknya, jika ketinggian garisan elemen sebaris melebihi ketinggian kotak garisan, ketinggian sebenar akan dikuasai oleh ketinggian garisan elemen sebaris.

Atas ialah kandungan terperinci Bagaimanakah saiz fon, ketinggian garisan dan ketinggian sebenar berinteraksi untuk menentukan ketinggian elemen dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!