自動高さ計算にディケンダーの高さを含めるにはどうすればいいですか？

line-height：1の場合、フォントのディセンダが自動高さをオーバーフローします。ここで自動高さ計算にディケンダーの高さを含めるにはどうすればいいですか？

はサンプルです：

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

<html> 
 

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

 
</html>

私は高さを計算し、手動でパディングを追加するためにHow to calculate descender height in javascript?を使用することができますが、私はそれが可能だ場合、純粋なCSSのソリューションを使用したいと思います。

出典

2016-04-06 BoonToobies

問題は引き続きアンカー要素がないと表示されますが、問題を確認するのが簡単になります。 – BoonToobies

「下線のスペース」がありません。ベースラインは、k、m、aなどの大部分の文字が配置されているラインですが、g、j、pなどのベースラインを下回る文字があり、このスペースが必要です。 '' line-height''は、可能な限り最も低い点から、アルファベットの任意の文字が到達可能な最高点までの高さを測定します。 – Johannes

これはもっと意味があります。だからスペースはそれらの手紙のために残されています。私は今それをhttp://codepen.io/anon/pen/xVpRYyで見ることができます。私は今それを修正する方法を見つけることができると思う。 – BoonToobies

どういう意味ですか？

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

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

ulスタイルにoverflow: auto;を削除して、あなたは、リンク上のスクロールバーを持っていません。

出典

2016-04-06 18:38:23

これは表示に時間がかかるだけです。フォントサイズを30pxまで上げると、スクロールバーが表示されます。 – BoonToobies

さて、私はあなたが望むものをより明確に見ています。ちょうど私の答えを編集 –

ラインハイト：1はhttp://meyerweb.com/eric/tools/css/reset/のreset.cssの一部です。ブラウザ間でcssのデフォルトを標準化するのに役立ちます。 liエレメントの高さが正しい。問題は、アンカー要素が、オーバーフローを引き起こすテキスト装飾のためのスペースを有することである。 – BoonToobies

自動高さ計算にディケンダーの高さを含めるにはどうすればいいですか？

答えて

関連する問題