行の高さを指定する

line-heightプロパティで指定する。

h1{
 font-size: 30px;
 line-height: 90px;
}

line-heightプロパティを90pxと指定すると

全体の高さが90pxになる。

font-sizeを30pxに指定すると

残りの60pxが上下均等にスペースができる。

今回は、

・全体を90px

・文字サイズが30px

・残りの60pxが上下に30pxずつ、スペースができた

他の値で指定しよう

p{
 font-size: 15px;
 line-height: 45px;
}

p{
 font-size: 20px;
 line-height: 3em;　⇒　フォントサイズの3倍
}

ワンポイント

・親要素で指定された設定は、子要素に継承される

・2emと単位ありで指定すると子要素のスペースも大きくなる

・2と単位なしで指定すると自然な仕上がりになる

1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座