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

　マージンも，パディングおよび枠同様，4 つの辺，トップマージン，ライトマージン，ボトムマージンおよびレフトマージンがあり，それぞれ対応する margin-top，margin-right，margin-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>

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

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

• マージンは，枠の外にとられ，背景が適用されない。一方，パディングは，枠の内側にとられ，背景が適用される。
• マージンは，負の値をとることができるが，パディングには 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>