CSS3

プロパティ

line-height

→●、mdn

行ピッチ、改行幅。

このプロパティは、行内ボックスに 選好される行高さ を指定する。それは、§ 行ボックスの中のレイアウト にて行内ボックスの論理縦幅 として利用される。

注記： line-height がブロック コンテナ に指定された場合、その根行内ボックス に継承されるので、実質的に当のブロック内の各行ボックス の最小な論理縦幅を確立する。

<length-percentage> ○

＝<length> | <percentage>

normal

選好される行高さは、フォント計量に基づいて自動的に決定される。§ 行内ボックスが供与する論理縦幅を見よ。

<DIV style="font-size:40px;
 border:1px solid black;
">あああ<BR>いいい</DIV>
<DIV style="font-size:40px;
 line-height:normal;
 border:1px solid red;
">あああ<BR>いいい</DIV>

<length> ○

指定された長さが、選好される行高さとして利用される。負な値は違法。

<DIV style="font-size:30px;
 line-height:20px;
 border:1px solid red;
">あああ<BR>いいい</DIV>

<number> ○

選好される行高さは、要素の font-size の算出値 に、この実数を乗算した結果になる。プロパティの算出値は指定値と同じになる。負な値は違法。

<DIV style="font-size:30px;
 line-height:1.2;
 border:1px solid red;
">あああ<BR>いいい</DIV>

<DIV style="font-size:30px;
 line-height:0.8;
 border:1px solid red;
">あああ<BR>いいい</DIV>

<percentage> ○

［選好される行高さ／プロパティの算出値］は、要素の font-size の算出値に対し、この百分率が成す分になる。負な値は違法。

<DIV style="font-size:30px;
 line-height:120%;
 border:1px solid red;
">あああ<BR>いいい</DIV>

<DIV style="font-size:30px;
 line-height:80%;
 border:1px solid red;
">あああ<BR>いいい</DIV>

注記： 行内ボックス ボックス の line-height 値が normal 以外の場合、［ボックス に可用な最初のフォント以外のフォントに属するグリフ］は、ボックスの［レイアウト限界域、基底線 の位置］には影響しない。

¶以下省く

テスト