Pemahaman komprehensif tentang ketinggian garis dan vertikal

Line-Height, font-size, dan vertikal-Align adalah atribut utama untuk mengatur tata letak elemen dalam garis. Ketiga atribut ini adalah hubungan yang saling tergantung, dan mengubah jarak antara baris dan menetapkan keberpihakan vertikal membutuhkan upaya bersama mereka. Konten font-size yang relevan telah diperkenalkan secara rinci dalam font CSS. Artikel ini terutama akan memperkenalkan garis tinggi garis dan vertikal.

Tinggi garis garis-tinggi mengacu pada jarak antara garis dasar garis teks. Line-height sebenarnya hanya mempengaruhi elemen in-line dan konten in-line lainnya, dan tidak secara langsung mempengaruhi elemen tingkat blok. Anda juga dapat mengatur garis-garis untuk elemen tingkat blok, tetapi nilai ini hanya akan berdampak ketika diterapkan pada konten inline elemen tingkat blok. Mendeklarasikan ketinggian garis pada elemen tingkat blok akan menetapkan ketinggian kotak garis minimum untuk konten elemen tingkat blok

Nilai: <long> | <sentase> | <number> | Normal | mewarisi

Nilai Awal: Normal

Diterapkan pada: semua elemen

Warisan: Ya

Persentase: ukuran font relatif terhadap elemen

Untuk memahami garis tinggi secara mendalam, Anda perlu memahami istilah umum tentang ketinggian garis.

Untuk elemen non-penggantian atau bagian dari teks anonim di baris, ukuran font dan keluarga font menentukan ketinggian area konten. Dalam Song Font, jika ukuran font dari suatu elemen dalam satu baris adalah 15px, ketinggian area konten adalah 15px; Di font lain, ketinggian area konten tidak sama dengan ukuran font.

Area konten ditambah jarak garis sama dengan kotak garis in-line. Jika ukuran font dari elemen non-penggantian dalam satu baris adalah 15px dan setinggi garis adalah 21px, maka perbedaannya adalah 6px. Agen pengguna membagi 6 piksel ini menjadi dua dan masing -masing berlaku setengah ke atas dan bawah area konten, yang memberikan garis di dalam kotak

Saat garis-garis kurang dari ukuran font, kotak garis-in-line sebenarnya kurang dari area konten

Kotak baris didefinisikan sebagai jarak antara bagian atas kotak dalam baris tertinggi di baris dan bagian bawah kotak dalam baris terendah, dan bagian atas setiap kotak baris berada di sebelah bagian bawah kotak baris sebelumnya.

Margin bagian dalam, margin luar dan batas tidak mempengaruhi ketinggian bingkai garis, yaitu, itu tidak mempengaruhi ketinggian garis.

Batas perbatasan elemen in-line dikendalikan oleh ukuran font, bukannya ketinggian garis

Margin tidak akan diterapkan ke bagian atas dan bawah elemen non-penggantian di baris

margin-kiri, padding-kiri, kiri-kiri diterapkan pada awal elemen; margin-kanan,-kanan-kanan, kanan-kanan diterapkan pada akhir elemen

Mengganti elemen dalam satu baris membutuhkan penggunaan nilai-nilai garis-garis untuk memposisikan elemen dengan benar ketika disejajarkan secara vertikal. Karena nilai persentase dari vertikal-align dihitung relatif terhadap garis-garis elemen. Untuk penyelarasan vertikal, ketinggian gambar itu sendiri tidak relevan, kuncinya adalah nilai ketinggian garis

Secara default, elemen pengganti inline terletak pada baseline. Jika Anda menambahkan margin dalam, margin luar, atau perbatasan ke elemen penggantian, area konten akan dipindahkan ke atas. Baseline dari elemen penggantian adalah baseline dari kotak baris terakhir dalam aliran normal. Kecuali, konten elemen penggantian kosong atau nilai atribut overflow itu sendiri tidak terlihat, dalam hal ini baseline adalah tepi bawah margin

Vertikal-Align digunakan untuk mengatur penyelarasan vertikal, semua elemen yang selaras secara vertikal akan mempengaruhi ketinggian baris.

Nilai: Baseline | sub | super | Top | Teks-top | Tengah | Bawah | teks-bottom | <long> | <sentase> | mewarisi

Nilai Awal: Baseline

Diterapkan pada: elemen in-line, elemen penggantian, sel meja

Warisan: Tidak ada

Persentase: Line-Height relatif terhadap elemen-ketinggian garis

[Catatan] Nilai persentase dari vertikal-sejajar di IE7-browser tidak mendukung tinggi baris desimal, dan efek tampilan berbeda dari browser standar saat mengambil garis dasar, tengah, teks-bot, dll. Solusi yang umum digunakan adalah mengatur tampilan: blok inline pada elemen garis.