CSS で行間隔を設定する

CSS で行間隔を設定するいくつかの方法を紹介します。

CSS で line-height プロパティを使用して行の間隔を設定する

CSS の line-height プロパティを使用して、段落内の行間の間隔を定義できます。プロパティは、線の高さを設定します。

線の高さを定義している間、線の間のスペースはそれに応じて拡大または縮小します。line-height プロパティをテキスト要素、特に段落に適用できます。

プロパティは、normal、number、length、%、initial、inherit などのさまざまな値を取ります。この記事では、これらのさまざまなオプションの使用法を示します。

normal 値は、line-height プロパティのデフォルト値です。通常の線の高さを設定します。

値を無次元の number として設定できます。指定された数値に現在のフォントサイズが掛けられ、line-height を設定するために使用されます。数値 1.6 は、line-height プロパティの推奨値です。

length 値を使用して、pt、px、cm などの単位を指定することもできます。%の値は、line-height を設定するための現在のフォントサイズのパーセンテージを指定します。

initial 値を使用して、line-height プロパティのデフォルト値を設定できます。inherit 値は、親要素のプロパティと同じ値を使用します。

たとえば、クラス normal、number、percentage、および length を使用して、HTML で 4つの div を作成します。div の中に、ダミーのテキストを書きます。

次に、CSS で、div 要素を選択し、width プロパティを 400px に設定し、word-wrap プロパティを break-word に設定します。次に、クラス名を持つ div 個人を選択し、以下の例に示すクラス名に従って、line-height プロパティ値を normal、2、80%、および 10px に設定します。。

また、div の幅と word-wrap プロパティに break-word を設定して、テキストを次の行に強制します。このようにして、line-height プロパティを使用して CSS で行間隔を設定できます。

サンプルコード：

<h2>Normal Value</h2>
<div class="normal">Integer semper, arcu vel bibendum euismod, tellus tortor interdum urna, sed varius libero mi sit amet odio. </div>

<h2>Number Value </h2>
<div class="number">Integer semper, arcu vel bibendum euismod, tellus tortor interdum urna, sed varius libero mi sit amet odio.</div>

<h2>Percentage Value</h2>
<div class="percentage">Integer semper, arcu vel bibendum euismod, tellus tortor interdum urna, sed varius libero mi sit amet odio.</div>

<h2>Length Value</h2>
<div class="length">Integer semper, arcu vel bibendum euismod, tellus tortor interdum urna, sed varius libero mi sit amet odio.</div>

div{
 width:400px;
 word-wrap: break-word;
}
div.normal {
 line-height: normal;
}

div.number {
 line-height: 2;
}

div.percentage {
 line-height: 80%;
}

div.length {
 line-height: 10px;
}