行間 line-height

line-height : 数値 ;

行間のサイズを指定します。

line-height : 1 ;

文字文字文字文字文字文字
文字文字文字文字文字文字

line-height : 1.5 ;

文字文字文字文字文字文字
文字文字文字文字文字文字

line-height : 3 ;

文字文字文字文字文字文字
文字文字文字文字文字文字

文字の大きさを基準に行間が広がります。

１＝文字の大きさですが、macでは行間が狭いらしいので1.5以上取るようにしましょう。

line-height : 100% ;

文字文字文字文字文字文字
文字文字文字文字文字文字

line-height : 150% ;

文字文字文字文字文字文字
文字文字文字文字文字文字

line-height : 300% ;

文字文字文字文字文字文字
文字文字文字文字文字文字

文字の大きさを基準に行間が広がります。

100%＝文字の大きさです。

line-height : 10px ;

文字文字文字文字文字文字
文字文字文字文字文字文字

line-height : 15px ;

文字文字文字文字文字文字
文字文字文字文字文字文字

line-height : 30px ;

文字文字文字文字文字文字
文字文字文字文字文字文字

文字を含めた文字の高さになります。

解かりやすく背景にメモリをつけました。

行間指定（30px）－ 文字の大きさ（10px）＝実際の行間（20px）