行間を調整する

line-height

CSSの書き方

line-height:値 ;

CSSの詳細情報
プロパティ名 line-height 読み方 ライン・ハイト
初期値 normal 意味 行間調節
サイズ指定/パーセント指定
対象 すべての要素
CSSレベル CSSレベル1 対応ブラウザ Windows MAC
継承 する IE 5.0以上/FF1.0/NS7.1/OP8.0 SF/IE5.0

解説

行間を調節するスタイルシートです。

サイズまたはパーセントによる指定が可能です。

サイズ(数値)による指定

「14px」などサイズ(数値)で指定した場合は、そのサイズが行の高さとなります。

実際に表示されている文字がこの指定した数値より小さい場合は、行間が空き、逆に大きい場合には、行と行が重なり合って表示されます。

パーセント(相対的な数値)による指定

パーセントなど相対的な数値で行間を指定した場合、基準となる長さは「line-height」プロパティを指定した要素の文字の大きさです。

例えば、スタイルシートを設定しない状態で、文字が10ピクセルで表示された文章に150%の行間を与えた場合、行間は「10×(150-100)÷100」で、5ピクセルの間隔が空くことになります。

従って、パーセントで指定した場合の初期値は「100%」になります。

CSS/HTMLサンプル

p.line { line-height:150%; }

段落要素の文字列の行間をクラス指定で文字サイズの50%にする サンプル

【厳選】合わせて読みたいおすすめ書籍

WEB制作支援サイトのHTMLタグボードだからオススメできる厳選書籍です。私が読んでいない本はオススメしません。

HTMLやCSS、Webデザインを体系的に学ぶなら

CSSを駆使したモダンなWebデザインを学ぶなら

最新情報をチェックしよう!