Doğrudan bir öğe yerine üst öğede font boyutunun ayarlanması dikey hizalamayı nasıl etkiler?

Question

Dikey hizalamanın nasıl çalıştığını anlamaya çalışmak için basit bir işaret oluşturdum, ancak yazı tipi boyutu hizalamayı nasıl etkilediğimi karıştırmamı sağladı. yayılma doğrudan ayarlanmış yazı tipi boyutu olan https://jsfiddle.net/wL5zjLnf/1/

section { font-size: 75px; } 

aynı örneğin: üst elemanı üzerindeki yazı tipi boyutu seti ile

Örnek ilk örnek kırmızı blok olarak https://jsfiddle.net/tmk2hqon/

span { font-size: 75px; } 

gibi ikinci örnekte kırmızı blok orta çizgisi ile hizalanmış gibi görünüyor iken, orta son metin orta ile hizalayın.

• metni (75px)
• Beyaz: sanki

  Bu elementler karışıklık metin ve bloğun arasındaki hizalama arasında bazı beyaz boşluk gibi geliyor bana, üç unsur vardır ile uzay (75px ilk örnekte, normal yazı tipi, ikinci örnekte büyüklüğünde),

mi beyaz boşluğunun tam ortasında olan orta hizalamak metin

kırmızı bir blok ile taban çizgisinden taban hizalamak hangi Bu beklenen davranış, ya da nasıl çalıştığını yanlış yorumladı mı? Her iki örneğin de aynı sonucu vereceğini varsaydım ve sonuç kırmızı blok orta metnin son satırının sonuna hizalanacaktır.

Answer 1

Ebeveynin yazı tipi boyutunu ayarlayarak, dolaylı olarak satır yüksekliğini de ayarlayabilirsiniz, böylece div ortada olacaktır.

Spanın yazı tipi boyutunu ayarlarken, üst öğenin satır yüksekliği dokunulmadan kalır ve böylece ebeveyn, ana çizginin satır yüksekliğinin ortasındayken taban çizgisinde (görünüşte) görünür.