【CSSリファレンス】line-height

こんにちは（・∀・）

CSSプロパティをご紹介します。今回ご紹介するCSSプロパティはline-heightです。

概要

line-heightプロパティを使用して行の高さを指定します。値にマイナス値を指定する事はできません。

行の高さは、font-sizeが12pxでline-heightが18pxとした場合、行の高さ18pxからフォントサイズ12pxを引いた残りの6pxが行の高さになります。

また、行の高さがフォントサイズより小さくなる場合、行は重なって表示されます。

.sample {
  line-height: 1.5;
}

適用要素

すべての要素

指定できる値

normal

ブラウザに依存する

数値

数値+単位・%値・数値のみ
数値のみ指定した場合は子要素に相対値が継承され、単位を付けた場合は絶対値が継承されます。

初期値

normal

サンプル

HTML

<p class="demo">(行の高さは2.5です)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ornare vel risus sed imperdiet. Curabitur et euismod ipsum, ac volutpat tellus. Integer rhoncus tincidunt nisi, non luctus neque feugiat sed. Morbi efficitur non lectus in sodales. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam ut egestas nisi, in hendrerit dui. Curabitur vel aliquam lacus. Duis ultrices quam vel dignissim venenatis. Curabitur iaculis velit mauris. Aenean ut fringilla sem, eu cursus enim. Suspendisse eu convallis erat. Praesent dapibus ullamcorper sem. Sed quis ligula sed ex ullamcorper scelerisque a luctus ante. Duis facilisis tellus ac pretium pretium. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam vehicula ipsum tortor, fringilla egestas dolor porttitor a. Duis ut eleifend justo. Phasellus posuere cursus nibh, in aliquet magna consectetur at. Vivamus vulputate convallis nulla, vel scelerisque urna aliquet et. Etiam elementum quam vel enim bibendum gravida. Quisque dignissim sed orci pellentesque consectetur. In luctus venenatis lectus. Pellentesque vestibulum lorem a mauris vehicula ullamcorper. Quisque dignissim nulla id ex hendrerit, et commodo eros bibendum. Suspendisse mollis nibh sed viverra sodales. Ut fermentum scelerisque faucibus. Pellentesque volutpat, leo a facilisis aliquam, sapien leo convallis diam, sed aliquet velit lacus id ligula.</p>

CSS

.demo {
  line-height: 1.5;
}

Result