目次 | line-heightとは |
line-heightの値を1.5とした場合 | |
line-heightの値を2とした場合 |
line-heightとは
line-heightは、行の高さになります。
font-sizeが16pxでline-heightが1.5の場合、
1行の高さは24px(16*1.5)になります。
font-sizeの上下に4pxずつ追加されます。
書き方 | line-height : 値 |
値 | 数値 フォントサイズ*数値で行の高さになる。使用推奨。 |
line-heightの値を1.5とした場合 | |
line-heightの値を2とした場合 | |
数値+% | |
数値+単位 | |
normal ブラウザが設定。 |
|
初期値 | normal |
継承 | 継承する |
参考(MDN) | https://developer.mozilla.org/ja/docs/Web/CSS/line-height |
line-heightの値を1.5とした場合
<style>
.p1 {
font-size: 16px;
line-height: 1.5;
border: 1px solid #000;
width: 200px;
background: LightCyan;
}
</style>
<p class="p1">line-height<br />
line-height</1.5>
行の高さは、font-size(16) * line-height(1.5) = 24pxになります。
line-heightの値を2とした場合
<style>
.p1 {
font-size: 16px;
line-height: 2;
border: 1px solid #000;
width: 200px;
background: LightCyan;
}
</style>
<p class="p1">line-height<br />
line-height</1.5>
行の高さは、font-size(16) * line-height(2) = 32pxになります。
関連の記事
CSS color 文字の色を指定するサンプル
CSS font-family フォントを指定するサンプル
CSS text-align 文字を左寄せ/右寄せにする
CSS vertical-align 垂直の位置を指定するサンプル