Saya mempunyai blok dengan ketinggian baris tertentu di mana saya menyisipkan kandungan dengan::beforeunsur pseudo.
.block::before { content:'text here'; }
Ini berfungsi dengan baik. Tetapi jika saya juga memberikan kandungan saiz fon yang lebih kecil
.block::before { font-size:.6em; content:'text here'; }
Blok sebenarnya semakin tinggi. kenapa begitu?
.container { display:inline-block; } .lorem, .ipsum, .dolor, .sit { line-height:3em; border:1px solid green } .ipsum:before { content:'world!'; } .sit:before { font-size:.6em; content:'world!'; }
Hello
Hello
Baris atas tiada perubahan saiz fon, baris bawah berubah.
Sekarang saya mendapati penyelesaian yang mungkin adalah untuk menetapkan elemen pseudoline-height设置为0。或者到1em。或者甚至到normal。那么发生了什么？通过将字体大小设置为.6em是否将line-heightkepada beberapa nilai pelik? kenapa?
line-height:normalberjaya. Sesuatu mesti berlaku untuk menetapkan ketinggian baris secara tersirat kepada nilai yang lebih besar. Inilah yang saya ingin ketahui.
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
EDIT: Soalan ini telah mendapat banyak perhatian baharu kebelakangan ini, jadi ia telah dikemas kini di sini untuk menjadikannya lebih berguna.
Penyelesaian Alohci adalah betul, tetapi mungkin tidak benar-benar jelas kepada yang lebih cenderung secara grafik.
Jadi sila benarkan saya untuk menjelaskan penyelesaian dengan gambar.
Pertama, ketinggian garis mewarisi saiz yang dikira, jadi walaupun ia bermula dengan
em单位指定的，但子级将继承以像素为单位的值。例如，如果字体大小为20px且行高为3em, ketinggian garis ialah 60 piksel, walaupun untuk keturunan dengan saiz fon yang berbeza (melainkan mereka menentukan ketinggian baris mereka sendiri).Sekarang mari kita anggap fon mempunyai 1/4 descender. Iaitu, jika anda mempunyai fon 20px, penurunan ialah 5 piksel dan penaik ialah 15 piksel. Kemudian bahagikan ketinggian baris yang tinggal (40 piksel dalam kes ini) sama rata di atas dan di bawah garis dasar, seperti yang ditunjukkan di bawah.
Untuk blok dengan fon yang lebih kecil (0.6em atau 12 piksel), jumlah ketinggian garisan yang tinggal ialah 60-12 atau 48 piksel, yang juga dibahagikan sama rata: 24 di atas garis dasar dan 24 di bawah.
Kemudian jika kita menggabungkan dua fon pada garis dasar yang sama, anda akan melihat bahawa ketinggian garisan tidak dibahagikan dengan cara yang sama, jadi jumlah ketinggian blok yang mengandungi meningkat walaupun kedua-dua ketinggian garisan ialah 60 piksel.
Semoga ini menjelaskan segala-galanya!
Ketinggian kotak .lorem, .ipsum, .dolor dan .sit ialah ketinggian kotak satu baris yang terkandung di dalamnya.
Ketinggian setiap kotak baris ialah ketinggian maksimum di atas garis dasar tiang garisan dan teks dalam baris itu + ketinggian maksimum di bawah garis dasar. Kerana tiang dan teks diselaraskan pada garis dasar.
Untuk kejelasan, ketinggian (dalam em) di bawah merujuk kepada saiz fon keseluruhan bekas (iaitu elemen badan)
Dalam .ipsum (saiz fon 1em), ketinggian di atas garis dasar tiang dan teks ialah 1em (separuh atas mendahului) + 13/16em (riser, lebih kurang), ketinggian di bawah garis dasar ialah 1em (separuh baris mendahului) + 3 /16em ( bahagian menurun, lebih kurang) + 1em (sebelum separuh bawah garisan), sejumlah 3em.
Dalam .sit (saiz fon 0.6em), ketinggian di atas garis dasar ialah maksimum [1em (bahagian atas mendahului) + 13/16em (bahagian naik, lebih kurang tiang)] dan [1.2] em (bahagian separuh atas mendahului ) + 0.6 x 13/16em (bahagian meningkat, lebih kurang)], ketinggian di bawah garis dasar ialah [1em (bahagian bawah mendahului) + 3/16em (bahagian naik, lebih kurang) maksimum dalam bahagian menurun, lebih kurang) untuk tupang ] dan [1.2em (separuh bawah mendahului) + 0.6 x 3/16em (bahagian menurun, lebih kurang) untuk teks].
Menilai ini dan menukar kepada perpuluhan memberikan kita 1.8125em di atas garis dasar, 1.3125em di bawah garis dasar, untuk jumlah 3.125em, iaitu 3em lebih besar daripada .ipsum.