2016-04-06 34 views
2

Satır yüksekliğiyle: 1 yazı tipindeki descenders otomatik yüksekliğin üzerine taşacaktır.Otomatik yükseklik hesaplamasında yükseklik yüksekliği nasıl eklenir?

body{ 
 
    line-height: 1; 
 
    font-size: 50px; 
 
} 
 
div{ 
 
    overflow: auto; 
 
}
<html> 
 

 
<body> 
 
    <div> 
 
    <a href="">gqpy</a> 
 
    </div 
 
</body> 
 

 
</html>

ben yüksekliğini hesaplamak ve elle dolgu eklemek için How to calculate descender height in javascript? kullanabilirsiniz, ama eğer mümkünse saf CSS çözüm kullanmak istiyorum: Burada

bir örnektir.

+0

Sorun hala bağlantı elemanı olmadan ortaya çıkıyor, yalnızca sorunu görmeyi kolaylaştırıyor. – BoonToobies

+0

"alt çizgi için yer" yoktur. Taban çizgisi, k, m, vb. Gibi çoğu harfin yerleştirildiği çizgidir, ancak taban çizgisinin altına giden g, j, p vb. Gibi harfler vardır ve bu alana ihtiyaç duyarlar. "Satır yüksekliği", yüksekliği mümkün olan en düşük noktadan, alfabenin herhangi bir harfinin ulaşabileceği en yüksek noktaya kadar ölçer. – Johannes

+0

Bu, daha fazla anlam ifade ediyor. Yani bu harfler için boşluk kaldı. Onu şimdi http://codepen.io/anon/pen/xVpRYy adresinde görebiliyorum. Sanırım onu ​​düzeltmek için bir yol bulabilirim. – BoonToobies

cevap

0

Ne demek istiyorsun?

http://codepen.io/anon/pen/EKoYgL

ul { padding-left: 0} 
li { list-style-type: none; } 
a {font-size: 70px; } 

ul stilini overflow: auto; çıkarın ve bağlantıları bir kaydırma çubuğu olmaz.

+0

Sadece görünmesi daha uzun sürer. Yazı tipi boyutunu 30 piksele kadar çarptığında kaydırma çubuğu görüntülenir. – BoonToobies

+0

Tamam, şimdi ne istediğini daha net görüyorum. Sadece cevabımı düzenledim –

+0

satır yüksekliği: 1, http://meyerweb.com/eric/tools/css/reset/ adresinden reset.css dosyasının bir parçasıdır. Tarayıcılar arasında css varsayılanlarını standartlaştırmaya yardımcı olmak için var. Li öğesindeki yükseklik doğrudur. Sorun, ankraj elemanının, metin-dekorasyon için taşmaya neden olan bir alana sahip olmasıdır. – BoonToobies

İlgili konular