CSSでの行間

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

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

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

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

html<p>
  some long text
</p>
cssp {
  font-size: 20px;
  line-height: 50px;
  text-align: justify;
  width: 400px;
}

Результат:

Задание 1

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