CSSで段落の間隔を調整する

HTMLにおける段落とは、一般的にタグで囲まれたブロックを指します。

行間はもちろんですが、段落と段落の間隔、つまり～と次の～までの間隔が狭いと文章が読みにくく、コンテンツの内容も少なく見えてしまいます。

段落の間隔はCSS（スタイルシート）を使って簡単に調整することができます。

CSSでタグにmarginを設定する

段落の上下に間隔を空けるには、以下のようにスタイルシート（CSS）に記述します。

p {
    margin: 2em 0px;
}

これでタグで囲まれた段落の上下に約2行分の間隔を空けることができます。

marginの値は指定する個数によって以下のように適用されますので参考にしてください。

［値を１つ指定］・・上下左右に指定した値が適用される
［値を２つ指定］・・１つ目の値が上下、２つ目の値が左右に適用される
［値を３つ指定］・・１つ目の値が上、２つ目の値が左右、３つ目の値が下に適用される
［値を４つ指定］・・１つ目の値が上、２つ目の値が右、３つ目の値が下、４つ目の値が左に適用される

上記の例では、段落の上下に2emのmarginを指定しているので、段落間の間隔が4emになってしまうように思われます。

しかしmarginには「marginの相殺」というルールがあり、上下の隣接するmarginはどちらか大きい方（同じ値の場合はどちらか一方）が適用されます。

そのため上記のように上下にmarginを指定した場合でも間隔が倍になることはありません。

上下のどちらかだけにmarginを指定することも可能です。その場合は次のように記述します。

[上にmarginを指定]

margin-top: 2em;

[下にmarginを指定]

margin-bottom: 2em;