ボックスの高さは、行の高さ

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
div { 
 
    line-height: 30px; 
 
} 
 

 
a { 
 
    font-size: 12px; 
 
}

<div> 
 
    <a href="">测试</a> 
 
</div>

よりも大きい場合、なぜ私はコンテンツの高さは30pxあるline-heightと同じであると考えています。しかし実際にはChromeでは32pxです。何故ですか？

2016-08-17 a86356

回答があれば、この問題を解決するのに役立つので、正解を選んでください。他の人はもうこれを試し続ける理由がありません。 –

<a />の行の高さは1.0以上です。

CSSで次の行を追加します。

a { 
    /* current styles */ 
    line-height: 1; 
}

2016-08-17 13:28:37

いいです。しかし、私は別の問題に会った、それはスペース上の単語がスペースよりも大きい単語を下回っているようだ？どうして？ – a86356

フォントの設計方法やブラウザのレンダリングによって異なる場合があります。それは時々私も病気になりますが、私のために大したことではありません:) –

あなたは垂直に整列を使用することができます：中央;私の答えをチェック –

line-heightがfont-size チェックに依存しているので、このjsfiddleは私がちょうどfont-sizeを変更し、高さは30px

また、あなたがvertical-align: middle;が必要です<a>の場合は、上部と下部の間隔が同じ

2016-08-17 13:36:23

答えて