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 definisiTinggi 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
istilahUntuk memahami garis tinggi secara mendalam, Anda perlu memahami istilah umum tentang ketinggian garis.
Area kontenUntuk 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.
Bingkai inlineArea 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 garisKotak 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.
Properti KotakMargin 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
Ganti elemenMengganti 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
Align-vertikal definisiVertikal-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.
Kode CSS menyalin konten ke clipboard