HTML STUDY
>
>

行間を調整する

ここではCSSで行間の間隔を調整していく方法を解説していきます。

line-height

CSSプロパティline-heightは文章の行間を調整します。line-heightの値としてnormal（ブラウザごとに指定した行間）、パーセント（一行の高さを基準とした行間）があります。

要素解説
<p>ひと段落
CSSプロパティ解説
line-height行間を調整

HTMLコード記述例

<p class="line-normal">行間をnormalに設定しています。line-heightにnormalの値を入力すると閲覧側のブラウザが基準としている行間で表示されます。ここでは行間の間隔がわかりやすいようにp要素の横幅を少しせまく固定で表示しています。</p>

<p class="line-300">行間を300パーセントに設定しています。line-heightにパーセントの値を入力すると一行の高さを相対的に計算した行間で表示されます。ここでも行間の間隔がわかりやすいようにp要素の横幅を少しせまく固定で表示しています。</p>

外部ファイルCSS記述例

@charset "utf-8";

p.line-normal {
 line-height: normal;
 width: 400px;
}

p.line-300 {
 line-height: 300%;
 width: 400px;
}

ブラウザ表示例

行間をnormalに設定しています。line-heightにnormalの値を入力すると閲覧側のブラウザが基準としている行間で表示されます。ここでは行間の間隔がわかりやすいようにp要素の横幅を少しせまく固定で表示しています。

行間を300パーセントに設定しています。line-heightにパーセントの値を入力すると一行の高さを相対的に計算した行間で表示されます。ここでも行間の間隔がわかりやすいようにp要素の横幅を少しせまく固定で表示しています。

CSS文字 関連記事