Bagaimanakah mengurangkan saiz fon menyebabkan ketinggian meningkat?

Question

Saya mempunyai blok dengan ketinggian baris tertentu di mana saya menyisipkan kandungan dengan ::before unsur 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!';
}

<div class="container">
    <div class="lorem">Hello</div>
</div>
<div class="container">
    <div class="ipsum"></div>
</div>
<hr style="clear:both"/>
<div class="container">
    <div class="dolor">Hello</div>
</div>
<div class="container">
    <div class="sit"></div>
</div>

Baris atas tiada perubahan saiz fon, baris bawah berubah.

Sekarang saya mendapati penyelesaian yang mungkin adalah untuk menetapkan elemen pseudo line-height设置为0。或者到1em。或者甚至到 normal。那么发生了什么？通过将字体大小设置为 .6em 是否将 line-height kepada beberapa nilai pelik? kenapa?

PS Walaupun ini mungkin kelihatan seperti pendua (lihat senarai di sebelah kanan), tiada satu pun jawapan yang saya baca setakat ini menjelaskan mengapa tetapan line-height:normal berjaya. Sesuatu mesti berlaku untuk menetapkan ketinggian baris secara tersirat kepada nilai yang lebih besar. Inilah yang saya ingin ketahui.

Answer 1

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!

Answer 2

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.