にしし ふぁくとりー:西村文宏 個人サイト

"CSS Tips Factory" : Presented by Nishishi. Since 1997.

連続する段落と段落の間隔(余白)を狭くしたり広くしたりするCSS [ボックス,余白]

p要素を使って段落を作ると、代表的なブラウザでは段落と段落の間に1行分の空白が挿入されて表示されます。この「段落と段落の間にある空間」量を自由に調節したければ、スタイルシートのmarginプロパティに望みの値を指定することで、p要素に対する標準スタイルを上書きすれば良いでしょう。段落の間隔を自由な量に設定するCSSの書き方を解説。

連続する段落と段落の間隔(余白)を狭くしたり広くしたりしたい

HTMLで段落を作る要素は「p要素」です。とても頻繁に使われる要素の1つでしょう。このp要素を使って段落を作ると、代表的なブラウザでは段落と段落の間に1行分の空白が挿入されて表示されます。

段落と段落には1行分の余白が標準でできる図

これは、p要素に対して標準で適用されるスタイルとして、上下に「1em」のマージン(=margin/外側の余白)が設定されているからです。この標準スタイルをCSSソースで表すと、下記のようになります。

CSSソース

p {
   margin: 1em 0px;   /* 上下に1em・左右に0px */
}

したがって、この「段落と段落の間にある空間」量を自由に調節したければ、スタイルシートのmarginプロパティに望みの値を指定することで標準スタイルを上書きすれば良いでしょう。

備考:上下に隣接する段落のマージンは、大きい方だけが採用される

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

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

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

例えば、p要素が2つ縦に並んでいるとき、

  • 上側のp要素はマージン0px、下側のp要素はマージン20pxの場合、両者の間隔は20pxになります。
  • 上側のp要素はマージン10px、下側のp要素はマージン20pxの場合、両者の間隔は20pxになります。
  • 上側のp要素はマージン15px、下側のp要素はマージン20pxの場合、両者の間隔は20pxになります。
  • 上側のp要素はマージン20px、下側のp要素はマージン20pxの場合、両者の間隔は20pxになります。
  • 上側のp要素はマージン25px、下側のp要素はマージン20pxの場合、両者の間隔は25pxになります。
  • 上側のp要素はマージン30px、下側のp要素はマージン20pxの場合、両者の間隔は30pxになります。

このように、上下方向に隣接するマージンは互いに重なり合って「大きい方」の距離だけ離れることになります。

上下に隣接する段落同士の間隔を狭くする書き方

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

CSSソース

p {
   margin: 0.5em 0px;
}

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

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

HTMLソース

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

上記ではdiv要素にclass名として「sample」を指定してあります。
ここに、以下のようなCSSソースを書きます。

CSSソース

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

こうすれば、このdiv要素の範囲内に含まれる段落(p要素)だけ、段落と段落の間隔が0.35文字分に狭まります。

ここではp要素を例にしましたが、上記の仕様はp要素に限りません。div要素やh1要素など他のブロックレベル要素でも同様に、上下方向に隣接するマージン(外側の余白)は大きい方だけが採用されて表示されます。ブロック間の空間を調節したい際には注意して下さい。

()

スタイルシートTipsふぁくとりーの主要なカテゴリ

下記のカテゴリに区分して、スタイルシートに関するTIPSを公開しています。カッコ内の数字は、該当する記事の件数です。

著者紹介


にしし(西村文宏)

にししでございます。本書いたり記事書いたりしてます。あと萌えたり。著書5冊発売中です(Web製作系4冊+小説1冊)。著書や記事は「西村文宏」名義。記事は主にAll Aboutで連載。本の最新刊は2011年3月に発売されたライトノベルでございますよ。

Twitter:にしし/西村文宏
にしし/西村文宏 on facebook にしし/西村文宏 on mixi フォローはお気軽に!

にしし(西村文宏)連絡先
☕ コーヒーをおごる

著書一覧と詳細

関連するかもしれない情報

▼当サイト内外で関連しそうな記事などが自動表示されています。(たぶん)

--- 当サイト内を検索 ---