Rumah > hujung hadapan web > tutorial css > Bagaimanakah Ketinggian Garisan Mempengaruhi Ketinggian Blok dan Elemen Sebaris?

Bagaimanakah Ketinggian Garisan Mempengaruhi Ketinggian Blok dan Elemen Sebaris?

Linda Hamilton
Lepaskan: 2024-11-10 22:08:02
asal
635 orang telah melayarinya
<p>How Does Line-Height Impact the Height of Block and Inline Elements?

Menentukan Ketinggian Kotak Kandungan untuk Elemen Blok dan Sebaris

Elemen Blok

<p>Untuk elemen blok, ketinggian kotak kandungan boleh ditentukan menggunakan sifat ketinggian garis dengan cara berikut:

  • Jika tiada sebarang kanak-kanak peringkat blok, pelapik atau sempadan, ketinggian elemen ditentukan oleh ketinggian garis.
  • Jika elemen blok mewujudkan Konteks Pemformatan Sebaris (IFC), ketinggian ditentukan oleh baris terakhir kotak ditetapkan mengikut ketinggian garis.
  • Jika elemen blok mewujudkan Konteks Pemformatan Blok (BFC), ketinggian ditentukan oleh ketinggian anak aliran masuk terakhir (termasuk jidar runtuh) atau tepi jidar bawah kanak-kanak itu (jika jidar atasnya tidak runtuh dengan jidar bawah elemen).

Elemen Sebaris

<p>Untuk elemen sebaris, sifat ketinggian tidak berlaku. Sebaliknya, ketinggian kawasan kandungan adalah berdasarkan metrik fon yang digunakan dan tidak boleh dikawal secara eksplisit oleh sifat CSS. Kawasan kandungan hendaklah sentiasa muat dalam kotak garisan, tetapi ketinggian tepat mungkin berbeza-beza bergantung pada fon dan enjin pemaparan.

<p>Untuk menggambarkan perbezaannya, pertimbangkan coretan kod berikut:

<p>
Salin selepas log masuk
<p>Dalam contoh ini, elemen div dan p mewujudkan IFC, jadi ketinggian kotak garisan akan sepadan dengan ketinggian garis. Walau bagaimanapun, untuk elemen rentang sebaris, ketinggian kawasan kandungan ditentukan oleh metrik fon dan mungkin berbeza daripada ketinggian garis.

Atas ialah kandungan terperinci Bagaimanakah Ketinggian Garisan Mempengaruhi Ketinggian Blok dan Elemen Sebaris?. 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
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan