web-dev-qa-db-ja.com

高さ対線の高さのスタイリング

1行を超えることのないテキストを処理するときにこれら2つを使用することの違いは何ですか?どちらも、要素の上部または下部にある要素に関して私が見ることができるものから、画面上で同様の結果を生成できます。なぜ行高さを使用するのですか?高さを使用する方が理にかなっています。

編集:テキストのあるdivから作成されたスタイル付きボタンの例。これは複数行になることはありません。では、互換性の理由から行の高さが必要でしょうか?または私が知らない何か?

ありがとう!

30
EverTheLearner

heightは、コンテナの垂直方向の測定です。

line-heightは、テキストの最初の行の上端から2番目の行の上端までの距離です。

テキストを1行だけで使用すると、ほとんどの場合、同様の結果が得られると思います。

コンテナーのサイズを明示的に設定する場合はheightを使用し、活版印刷レイアウトの場合はline-heightを使用します。ユーザーがテキストのサイズを変更する場合に関連する可能性があります。

26
Dennis Traub

テキストをdivでラップし、divに高さを指定すると、テキストが2行に成長します(おそらく、携帯電話のような小さな画面で表示されているため)、テキストはその下の要素と重なります。一方、divに行の高さを指定し、テキストが2行になると、divは拡大します(divに高さを指定しない場合)。

これを示す fiddle です。

21
DwB

テキストがコンテナよりも小さいと仮定します:

コンテナーの行の高さを設定すると、コンテナー内の行ボックスの最小の高さが指定されます。 1行のテキストの場合、これにより、テキストがコンテナー内で垂直方向に中央揃えになります。

コンテナーに高さを設定すると、コンテナーは垂直方向に拡大しますが、コンテナー内のテキストは、コンテナー内の最初(上)の行から始まります。

0

引用する場合の実用的な目的で(複数行に折り返さない)行の高さはテキストを垂直方向に中央揃えにします。ユーザーが最終的にフォントサイズを制御するので、その仮定に注意してください。

0
steveax

height = line-height + padding-top + padding-bottom

0
Alexis Gamarra