0

高さ（px）がわかっているdivがあります。このdivには、既知のフォントサイズ（px）のテキストがあります。次に、padding-topを使用してテキストを押し下げ、その下の要素に接触させます。ただし、押しすぎてdivを拡張してはなりません。

パディングを計算するにはどうすればよいですか？line-height：100％を設定しても、div-heightからfont-sizeを引くだけで、divが拡張されます。フォントに基づいて定義された高さはありますか？それは常に同じですか？それともフォントファミリーに依存しますか？少なくともフォントの太さに依存しているに違いないと思います。

（押し下げの問題を解決するためにposition：absoluteを使用したくない。）

4

1 に答える 1

3

フォントファミリーによって異なります。各フォントには異なるベースラインがあります。コンテナの高さをフォントの高さに一致するように設定した場合でも、フォントはコンテナの下にぶら下がっています。これは、行の高さを使用して中央に配置できますが、フォントの上下にスペースが残っています。

これをよりよく説明する記事があります。

http://blog.typekit.com/2010/07/14/font-metrics-and-vertical-space-in-css/

デモ：

これが私が始めたデモです。ベースラインがどこにあるか、そして上部にどれだけの余分なスペースがあるかを簡単に知ることができます。line-heightが等しいfont-sizeに設定されている場合、フォントは垂直方向に中央揃えになります。ただし、ご覧のとおり、上下に空白が残っています。したがって、フォント自体はコンテナと正確に同じ高さではありません。

HTML

<h1>ABCDEFGHIJKLMNOPQRSTUVWXYZ</h1>
<h1>abcdefghijklmnopqrstuvwxyz</h1>

<h2>ABCDEFGHIJKLMNOPQRSTUVWXYZ</h2>
<h2>abcdefghijklmnopqrstuvwxyz</h2>

<h3>ABCDEFGHIJKLMNOPQRSTUVWXYZ</h3>
<h3>abcdefghijklmnopqrstuvwxyz</h3>

<h4>ABCDEFGHIJKLMNOPQRSTUVWXYZ</h4>
<h4>abcdefghijklmnopqrstuvwxyz</h4>

CSS

h1 { 
    font-family:sans-serif;
    font-size:34px;
    height:34px;
    margin-bottom:5px;
    border:1px solid #CCC;
}

h2 { 
    font-family:serif;
    font-size:34px;
    height:34px;
    margin-bottom:5px;
    color:blue;
    border:1px solid #CCC;
    line-height:34px; /*NOTE THIS ONE HAS LINE-HEIGHT*/
}

h3 { 
    font-family:"impact";
    font-size:34px;
    height:34px;
    margin-bottom:5px;
    border:1px solid #CCC;
}

h4 {
    font-family:"Courier New";
    font-size:34px;
    height:34px;
    margin-bottom:5px;
    border:1px solid #CCC;
}

フィドルURL：

http://jsfiddle.net/KtY4F/9/

于 2013-01-31T22:10:07.610 に答える