CSSでの行間

次に、テキストの行間を設定する方法を学びましょう。行間とは、テキストの行間の距離、つまり行間の空白部分を指します。これは、テキスト行の高さを設定するプロパティline-heightの役割です。

line-heightプロパティを使用する際に、少し注意が必要です。このプロパティは、一見行間を設定するように見えますが、実際にはテキスト行の高さを設定します。

つまり、行間の実際の視覚的な間隔は次のように計算されます：line-height - font-size = テキスト行間の視覚的な距離。

次の例では、テキスト行間の距離は50px - 20px = 30pxになります：

<p>
	some long text
</p>

p {
	font-size: 20px;
	line-height: 50px;
	text-align: justify;
	width: 400px;
}

段落のフォントサイズを30pxとします。 line-heightプロパティを設定して、段落間の視覚的な空白間隔が15pxになるようにしてください。