0

私はfirebugを使用してヘッダー要素を検査してきましたが、パディングが設定されていなくても、ヘッダーコンテナーが含まれているテキストをハグしないことに気付きました。

<h2>test</h2>

http://jsfiddle.net/BTwk6/

上下の間隔が左右の間隔よりも大きいため、h2が収納ボックスに真っ直ぐに収まりません。

これは正常ですか？とにかくh2ボックスにそのテキストをハグさせることはありますか？

ありがとう

4

4 に答える 4

2

はい、それは正常であり、物事はそのようになっているはずです。たとえば、見出し要素に境界線を設定すると、見出しテキストの文字は通常境界線に触れないことがわかります。

これには2つの理由があります。まず、フォントの高さはデザインコンセプトであり、（通常は）文字の高さに対応していません。大文字の上だけでなく、テキストのベースラインの下にも空きスペースがあります。一部のデザインでは、「j」や「g」のようなディセンダーがフォントの下部に到達し、「Ê」のような発音区別符号が上部に到達するか、それを超える場合があります。

次に、通常、線の上下にいくつかの先頭があり、通常はフォントの高さの合計15〜20％です。デフォルトはフォント（およびブラウザ）によって異なります。実際には、これは読みやすさを向上させ、文字が前または次の行の文字に触れないようにすることを意味します。

フォントの高さ（フォントサイズ）と先頭の合計である合計の高さを設定するline-heightため、先頭は設定によって間接的に設定されます。line-heightを設定することによりline-height: 1、ゼロにつながるように設定します。これはタイポグラフィでは「設定ソリッド」と呼ばれ、1行の見出しのような孤立した行に適しています。ただし、最初に説明した理由、つまりフォントに「組み込まれている」間隔が原因で、まだ間隔があります。line-height0.85などの小さい値に設定して、先頭を負にすることもできます。使用するフォントがページで提案したフォントと異なる場合、これにより文字が垂直方向に切り捨てられる可能性があることに注意してください。

于 2012-06-07T05:18:17.470 に答える
2

line-heightプロパティも調整してみてください。デフォルトでは、フォントごとに上下に異なるスペースがあります。これを完全に修正できない場合があります。たとえば、単語

Tempura

言葉よりずっと背が高い

mum

ただし、「お母さん」という単語は、「天ぷら」と同じ高さである必要があります。

于 2012-06-06T23:11:15.170 に答える
0

デフォルトでは、h2要素のマージンは上下19pxです。リセットしてみてください

于 2012-06-06T21:32:16.350 に答える
0

マージンとパディングをリセットしてみてください：

h2{margin:0;padding:0}

0を独自の値に置き換えます..。

mimiz

于 2012-06-06T21:34:27.657 に答える