Part 1. Let's begin CSS : Chapter 3. “要素の整形”

3.7 マージン

 3.1 でボックスの構成について説明し,ここまででパディングおよび枠について解説してきた。ここでは,もうひとつのボックスを構成する部分,マージンについて解説する。

マージンとそのプロパティ

 マージンは,3.1 で述べたボックスモデルの,もっとも外側にとられる余白である。マージン領域には,背景は適用されず,つねに背景色は“透過”(background-color プロパティtransparent が指定されたのと同じ状態)となる。

 マージンも,パディングおよび同様,4 つの辺,トップマージン,ライトマージン,ボトムマージンおよびレフトマージンがあり,それぞれ対応する margin-topmargin-rightmargin-bottom および margin-left プロパティでその幅を指定する。

margin-top: 長さ;
margin-top: 百分率;
margin-top: auto;

margin-right: 長さ;
margin-right: 百分率;
margin-right: auto;

margin-bottom: 長さ;
margin-bottom: 百分率;
margin-bottom: auto;

margin-left: 長さ;
margin-left: 百分率;
margin-left: auto;

 これらのプロパティは,

  • すべての要素に適用される。
  • 初期値は,0(ゼロ)である。
  • プロパティの値は,継承されない。

 マージンの 4 つのプロパティに長さを与えたとき,原則的にその長さの分だけ余白を取る。長さとして負の値を与えることもできる(その結果,2 つ以上の要素が重なってしまうこともある)。また,百分率で与えられたときは,その要素の収容ブロックの幅を 100% としてマージンの幅が計算される(ただし,ページメディアでのページ設定の場面では,margin-top および margin-bottom プロパティの百分率は“ページボックス”の高さを参照する)。キーワード auto が指定されたときは,要素の内容の幅または高さとその他の辺のマージンの指定状況からその辺のマージンが自動的に設定される(詳細は後述する)。

 マージンにも,パディング同様,短縮プロパティがある。margin 短縮プロパティは,4 辺のマージンを同時に指定するもので,書式は padding 短縮プロパティと同じく,1 つから 4 つの値を空白で区切って与える。値の数と辺の関係も同じである。

margin: 全方向のマージン;
margin: 上下マージン 左右マージン;
margin: 上マージン 左右マージン 下マージン;
margin: 上マージン 右マージン 下マージン 左マージン;

 マージンの例をご覧いただこう。

P { background-color: #9CF; line-height: 130%; padding: 0.2em; margin-left: 10%; }
H3 { border-bottom: dotted 2px #900; text-align: center; margin: 0 15%; /* 上下マージンは 0,左右マージンは 15% */ }

<H3>SMTP サーバとメールリレー</H3>
<P> SMTP サーバは,その所属するドメインと同じドメインからのメールしか送信要求に応じないように設定することが多い。この設定がなされないと,あらゆるホストからのメールを中継してしまい,スパムメールの不正中継に利用されることがある。</P>

SMTP サーバとメールリレー

 SMTP サーバは,その所属するドメインと同じドメインからのメールしか送信要求に応じないように設定することが多い。この設定がなされないと,あらゆるホストからのメールを中継してしまい,スパムメールの不正中継に利用されることがある。

IE4, 5
インラインボックスを生成する要素に,マージンは適用できない。
Op6
マージンと text-indent プロパティの組み合わせにより,表示が乱れる。

マージンとパディング

 ボックスを構成する部分として,マージンとパディングがあり,ここまででそれらを解説した。これらは,いずれもボックスに余白を取るものであるが,その詳細と役割は異なっている。これをまとめておこう。

 マージンとパディングには,次のような相違点がある。

  • マージンは,枠の外にとられ,背景が適用されない。一方,パディングは,枠の内側にとられ,背景が適用される。
  • マージンは,負の値をとることができるが,パディングには 0 以上の長さしか与えられない。
  • マージンのプロパティには,キーワード auto を指定することができるが,パディングのプロパティには,それができない。
  • ブロックボックスの上下マージンは,特定の条件のもとで,指定した値より小さくなる場合があるが(マージンの圧縮;詳細は後述する),パディングはいかなる場合でも指定された値だけ余白をとる。

3.1 の図などをもう一度ご覧になって,復習されるとよいだろう。

 本 Section の最後に,“マージンは枠の外にとられ,パディングは枠の内側に取られる”ことを示す例を掲げておこう。

P { border: thin solid #900; background-color: #C69; }
#wide-padding { margin: 0; padding: 5em; }
#wide-margin { margin: 5em; padding: 0; }

<P ID="wide-padding">このパラグラフはパディングが広くとられています。</P>
<P ID="wide-margin">このパラグラフはマージンが広くとられています。</P>

このパラグラフはパディングが広くとられています。

このパラグラフはマージンが広くとられています。