"CSS Tips Factory" : Presented by Nishishi via WordPress.

隣接する段落の余白を狭くする [ボックス, 余白]

段落と段落には1行分の余白が標準でできる図p要素を使って段落を作ると、代表的なブラウザでは段落と段落の間に1行分の空白ができます。これは、標準で「1em」のマージン(=margin/外側の余白)が指定されているからです。スタイルシートのmarginプロパティに望みの値を入れることで、この段落間の余白を調節することができます。

段落1つに対して上下に1行分の余白が指定されているのにもかかわらず、2つの段落の間隔は2行分にはなりません。これは、スタイルシートの仕様で、「隣接するマージンは大きい方を採用する」と決まっているからです。(下図参照)

隣接する余白は重なって1つ分になる図

従って、2つの段落の間隔を狭めたいと思うなら、片方のマージンだけを変更するのでは不十分で、両方のマージンを調節する必要があります。(逆に、2つの段落の間隔を広げたいと思うなら、片方だけの調節でも構いません。なぜなら、大きい方が採用されるからです。)

例えば、上側の段落の余白が15ピクセルと指定されていても、下側の段落の余白が20ピクセルと指定されていれば、その2つの段落の間隔は20ピクセルになります。

段落のマージンを指定するには、marginプロパティを使います。標準では上下に「1em」が指定されていると考えられるので、狭めたいならそれよりも小さな値を指定すればよいでしょう。
例えば、上下のマージンを半分にするには、以下のように記述します。

p {
   margin: 0.5em 0px;
}

marginプロパティの値に2つの数値を指定すると、1つめは上下のマージン、2つめは左右のマージンだと解釈されます。上記のスタイルシートソースの場合は、上下が0.5em(0.5文字分)のマージン、左右のマージンはゼロになります。

上記のソースは、ページ内のすべての段落(p要素)を対象にした装飾になります。特定の箇所のみの段落を対象にしたいなら、その箇所をdiv要素などのブロックで囲み、そこに含まれるp要素のみを対象とするよう記述すると良いでしょう。例えば、以下のような感じで。

<div class="sample">
   <p>段落1</p>
   <p>段落2</p>
</div>

上記のHTMLのように、対象にしたい段落(p要素)をdiv要素で囲んでおいて、以下のようなスタイルシートを書きます。(div要素には、場所を特定できるようにクラス名を付加しておきます。上記の場合は「sample」。)

div.sample p {
   margin: 0.5em 0px;
}

こうすれば、この範囲内の段落だけ、(段落と段落の間隔が)0.5文字分になります。

このCSS TIPSへのコメントはお気軽に! [コメントはまだありません。]

著者紹介

主要なカテゴリ

このCSS TIPSへのコメント・トラックバック

コメントはまだありません。

コメント投稿欄 このCSS TIPSに対するコメント投稿を歓迎します。

(必須)

(必須) ※公開されません

※公開(リンク)されます

コメント:

※投稿内容によってはフィルタによって保留扱いとなる場合があります。その場合は承認後に掲載されます。
※本文中にURLっぽい文字列を記述すると、投稿内容はスパム扱いとなって無視されてしまう場合がありますので書かないようご注意下さい。

トラックバック

このCSS TIPSへのトラックバックURLは以下の通りです。

※言及リンクがないトラックバックは拒否されますのでご注意下さい。また、文字コードはUTF-8でお送りいただける方が望ましいです。