html - タグの高さに関する問題

Question

タグのサイズをテキストとまったく同じにし、画像に表示されているように上下に余分なスペースを入れないようにします（赤い長方形を意味します）。

これはマークアップです

<ul>
    <li><a href="#">content</a></li>
    <li><a href="#">content</a></li>
    <li><a href="#">content</a></li>
</ul>

これは私のJSFiddleです

前もって感謝します。

Answer 1

私が知っている唯一の方法は、行の高さに基づいて高さを設定することです:

li, a {
    line-height: 12px;
}

http://jsfiddle.net/EGDuU/12/

Answer 2

これは、使用されている特定のフォントと特定のテキスト コンテンツに関連する設定によってのみ可能です。

テキストをソリッドに設定した場合、つまりline-height: 1、ほとんどの文字の上とほとんどの文字の下にまだ余裕があります。ほとんどのラテン文字はテキストのベースライン上にあり、その下にはディセンダー (および文字の下の分音記号) 用のスペースがあります。一方、「j」や「Å」などの一部の文字は、フォントの高さの端からわずかに伸びる場合があります。

特定の例の「コンテンツ」と Arial フォントの場合、適切な設定は次のようになります。

li { line-height: 0.6; }
a { position: relative; bottom: 0.02em; }

もちろん、そのようなスタイルは非常に壊れやすく、テキストを境界線にぶつけると、読みやすさと美的外観が低下する傾向があります。