CSS - line-height

概要

属性名	line-height
値	normal \| <number> \| <length> \| <percentage> \| none
初期値	normal
適用可能要素	すべての要素
継承	継承する
メディア	Visual / Linebox
サポート	C1 / e3 / N4 / Fx1 / Ch1 / Op3.5 / Sa1

説明

行の高さを指定します。

値	説明
auto	高さを自動計算する
<number>	高さを 1.2 など、フォントサイズの倍数で指定
<length>	高さを 1.2em や 20px などの長さの単位で指定
<percentage>	高さを 100% などのパーセントで指定
none	親(祖先)のブロック要素のフォントサイズに依存

使用例

CSS

.sample-normal {
    line-height: normal;
    width: 400px;
    padding: 5px;
    border: 1px solid gray;
    margin-bottom: 1em;
}
.sample-200 {
    line-height: 200%;
    width: 400px;
    padding: 5px;
    border: 1px solid gray;
    margin-bottom: 1em;
}

HTML

<h3>normal</h3>
<div class="sample-normal">
この文章は、行の高さに normal を指定しています。
この文章は、行の高さに normal を指定しています。
この文章は、行の高さに normal を指定しています。
</div>

<h3>200%</h3>
<div class="sample-200">
この文章は、行の高さに 200% を指定しています。
この文章は、行の高さに 200% を指定しています。
この文章は、行の高さに 200% を指定しています。
</div>

表示

normal

この文章は、行の高さに normal を指定しています。この文章は、行の高さに normal を指定しています。この文章は、行の高さに normal を指定しています。

200%

この文章は、行の高さに 200% を指定しています。この文章は、行の高さに 200% を指定しています。この文章は、行の高さに 200% を指定しています。

初版：1997年7月27日、最終更新：2012年5月1日

https://www.tohoho-web.com/css/prop/line-height.htm