XHTML/CSS・トップ | CSSプロパティ・目次

●余白部分を指定する

 margin(マージン=余白)は余白を指定するプロパティです。また、すべての要素に対して適用できます。


body {
 background-color: #000000;
 color: #ffffff;
 margin-left: 8em;
 margin-right: 8em;
}

 ページ全体(body要素)の左右に8emのマージンを指定しています。1emが1文字くらいですから、8文字くらいの余白を左右に設けていることになります。


p {
 margin-left: 8em;
 margin-right: 8em;
}

 こちらは段落だけに左右8emのマージンを指定しています。また、上下のマージンは、以下のように指定します。

h3 {
 margin-top: 2em;
 margin-bottom: 2em;
}

 なお、marginプロパティには背景色を付けられません。透明ですから、その下の要素に適用した背景色がそのまま表示されます。なにもない場合は、body要素で指定した背景色(または、背景画像)が表示されます。ちなみに、ここのWebページの段落のマージンは、左5%、右30%の余白指定で、上下の余白は上が 3%、下が 5%のマージンをそれぞれ指定しています。


【使える値】

 値は長さを表す単位付きの数値かパーセンテージ(〜%)ですが、“auto”も使えます。“auto”の使い方については、「ブロック要素をセンタリングする」を参照にしてください。


■余白をまとめて指定する

 各マージン(margin-top、margin-bottom、margin-left、margin-right)で指定しても良いのですが、上下左右のマージンを次のようにまとめて指定することもできます。

h5 {
 background-color: #ff0000;
 text-align: center;
 font-size: 1em;
 margin: 2em 7em 1em 3em;
}

 レベル5の見出しを上から2em、右から7em、下から1em、左から3emのマージンを指定しています。

※直接関係のある書式は h5 { margin: 2em 7em 1em 3em; } です。


■値を1〜4個の範囲内で指定

 値の個数によって、次のように設定することができます。

値が一個 上下左右のマージン

値が二個 最初の値が上下のマージン、二つ目の値が左右のマージン

値が三個 上、左右、下のマージン

値が四個 上、右、下、左のマージン


 ところで、マージンは指定した要素の四角い領域(ボックス)内の一番外側に配置されることになっていますが、マージンの終点(始点)はどこを基準にしているのでしょうか? Webページの枠(端)でしょうか? body要素に指定した場合はそうなりますが、すべての要素に対して適用できるのですから、当然、隣接する要素ということになります。各要素に存在する四角い領域内にマージンがあると考えるとわかりにくくなるので、指定する方向の要素を基準にマージンを考えるとわかりやすいと思います。基準にする要素で一番多いのは見出し(h1〜h6)、段落(p)、リスト(list)、テーブル(table)などのブロック要素です。また、距離が離れている場合などに無視されるケースがあります。例えば、レベル2の見出しに margin-bottomとして、2emを指定しても、見出しの下にそれ以上の大きなスペースがあり、要素がなにもない場合は指定しても有効となりません。

 また、上下のマージンが重複した場合は、大きいほうのマージンが有効となります。例えば、レベル2の見出し(h2)の真下にレベル3の見出し(h3)を配置したと仮定します。そして、h2に margin-bottomとして4emを指定し、h3のほうに margin-topとして2emを指定したとします。その場合、h2の4emの下マージンが有効となります。従って、h2とh3の間には4emのマージンがあることになります。左右のマージンが重複した場合は加算されますので注意してください。なお、マージンを適用する方向に要素がなにもない場合は、Webページの枠(端)が基準となります。

XHTML/CSS・目次 | 領域(ボックス)・目次

Copyright (C) 2004-2007 http://www.xml.vc/