0

テキスト ボックス内に削除したいパディングがあります。次の HTML を検討してください。

<div>I am testing text. Hello WORLD.</div>

およびCSS:

div {
    font-size: 20px;
    line-height: 1;
    background: lightgreen;
}

ボックス内のテキストの上にパディングが表示されます: http://i.imgur.com/UMiC2BH.png

ご覧のとおり、テキストのすぐ上に、取り除くことができないように見える数ピクセルのパディングがあります。そのパディングをなくすためにできることはありますか (ハードコードされた調整値がないことが望ましい)。

この質問のコードは次のとおりです: http://jsfiddle.net/TL7VC/

4

3 に答える 3

2

パディングはありません。プロパティの初期値は 0 であり、設定しない限り、forがゼロ以外になるpadding理由はありません。paddingdiv

テキストが実線に設定されている場合、つまりline-height: 1、行の高さがフォントの高さと等しくなり、フォントのサイズと同じになります。ほとんどの文字の高さは、フォントの高さよりも小さくなっています。大まかに言えば、フォントの高さは、Å、Ê、j のように、アセンダーとディセンダー、および上下に分音記号を含むすべての文字に対応します。(詳しく見ると、フォントによっては、一部の文字がフォントの高さを少し超えている場合もあります。)

line-height1 より小さい値、たとえば 0.8 に設定することで、これを微調整することができます。次に、たとえば「H」が色付きの領域の上部に接触しているように見える場合があります。ただし、フォント サイズに応じて文字を配置する方法はフォント デザイナーの決定であるため、これはフォントによって異なります。

于 2013-11-01T21:42:55.833 に答える
1

これはパディングではなく、フォントの高さです。こんな大きなキャラを入れて

↑ ░ ↓

行にパディングがないことを確認します

于 2013-11-01T21:30:35.550 に答える
0

加えmargin:0pxてpadding:0px; 、あなたの体に。ここにフィドルがあります

于 2013-11-01T21:40:11.893 に答える