2017-12-11 7 views
0

divのテキストの上と下の空白を削除して、テキストが赤いボックス内にきれいに収まるようにするにはどうすればよいですか?div内の上のテキストから空白を削除する方法

div { 
 
    border: 2px solid red; 
 
    padding-top: 0px; 
 
    margin-top: 0px; 
 
}
<div>LEX</div>

+5

本当に達成しようとしているものが得られません。テキストの上と下の空白は、行の高さに応じてデフォルトの空白のようです:https://codepen.io/STWebtastic/pen/NXKvMm行の高さで遊んでいると、それは削除されます。平均? – MrBuggy

+0

ありがとうMrBuggy。私はあなたのポイントを得るが、私は可変のテキストサイズが必要と私はフォントの高さを使用して設定する:例えば24pt。試行錯誤だけで相対線高さを指定する方法がわかりません。 – user740360

+0

font-size変数は画面のサイズなどによって異なりますか? – MrBuggy

答えて

1

そうのような行の高さとEMをいじる試してみてください:

line-height: 1em; 

この方法で、あなたのフォントサイズが何であれ、行の高さが自動的に調整されます。 1emが多すぎるかもしれません..おそらく.667emはより良いフィット感ですか?

+0

これは非常に素晴らしい解決策を得られなかったし、emの正しい行の高さで動作するようです:https://codepen.io/STWebtastic/pen/NXKvMm – MrBuggy

+1

'em'単位は現在の要素のfont-size値に基づいています。この場合、font-sizeが24pxの場合、行の高さは.667 * 24px = 16pxになります。 https://developer.mozilla.org/en-US/docs/Web/CSS/length – LGT

関連する問題