CSSプロパティ

line-height

 まとまった文章の区切りとして、空の行を入れることがあります。

 

 そうすることで、内容のまとまりをはっきりさせる、文章の区切りをより明確にすることができます。

 

 しかし、一行分まるまる空いていると、前の文章とのつながりがなんとなく途切れてしまう気になります。しかし、空きは欲しい、

 

 この広すぎる空き具合をどうにかしたい!

 

そこで、空行の高さを調節するCSSセレクタの登場となります。

行の高さを設定するCSSプロパティ

 

高さの設定値は長さを使う

 

CSS プロパティ

line-height: 0.5;

line-height: 50%;

line-height: 0.5em;

line-height: 8px;

いずれも、もとの行の高さ(16px)を半分にします。☞ 値の詳細

埋め込みコード

 

HTML

<p> まとまった文章の区切りとして、空の行を入れることがあります。</p>
<p style="line-height: 0.5;">&nbsp;</p>
<p> そうすることで、内容のまとまりをはっきりさせる、文章の区切りをより明確にすることができます。</p>
<p style="line-height: 0.5;">&nbsp;</p>
<p> しかし、一行分まるまる空いていると、前の文章とのつながりがなんとなく途切れてしまう気になります。</p>

 

表示

 まとまった文章の区切りとして、空の行を入れることがあります。

 

 そうすることで、内容のまとまりをはっきりさせる、文章の区切りをより明確にすることができます。

 

 しかし、一行分まるまる空いていると、前の文章とのつながりがなんとなく途切れてしまう気になります。

 

 ☞ CSS埋め込み

 

高さの設定値の詳細

normal

 

line-height: normal;

 

初期設定値です。見ている人のPCブラウザに依存します。

 

数値のみ(単位なし)

 

line-height: 1.5;

 

文字(text)の高さに数値をかけた分の高さになります。計算はその時使われているフォントを基にします。

 

長さ(単位付き)

 

line-height: 24px;

 

行の高さを長さで指定します。

 

割合(%)

 

line-height: 150%;

 

文字(text)の高さに対して割合で指定します。計算はその時使われているフォントを基にします。