フレームモデル：CSS外側マージン

要素の枠線に囲まれた空白領域は外側マージンです。外側マージンを設定することで、要素の外に追加の「スペース」が作成されます。

外側マージンを設定する最も簡単な方法は、margin属性を使用することです。この属性は、どんな長さ単位、百分率、または負の値も受け入れます。

CSS margin 属性

外側マージンを設定する最も簡単な方法は、 margin属性。

margin属性は、ピクセル、インチ、ミリメートル、またはemなどのどんな長さ単位も受け入れます。

marginはautoに設定できます。より一般的な方法は、外側マージンに長さ値を設定することです。以下の宣言は、h1要素の各辺に1/4インチの幅のスペースを設定しています：

h1 {margin : 0.25in;}

以下の例では、h1要素の4つの辺に異なる外側マージンが定義されています。使用される長さ単位はピクセル(px)です：

h1 {margin : 10px 0px 15px 5px;}

内側マージンの設定と同様に、これらの値の順序は上外側マージン（top）から順时针に元素を囲むように設定されています：

margin: top right bottom left

また、marginにパーセンテージ値を設定することもできます：

p {margin : 10%;}

パーセンテージは親要素のwidthに対して計算されます。この例では、p要素に設定された外側マージンは親要素のwidthの10%です。

marginのデフォルト値は0ですので、marginに値を宣言しなければ外側マージンは表示されません。しかし、実際には、ブラウザは多くの要素に対して既定のスタイルを提供しており、外側マージンも例外ではありません。例えば、CSSをサポートするブラウザでは、外側マージンは各段落要素の上と下に「空白行」を生成します。したがって、p要素に外側マージンを宣言しない場合、ブラウザが自分で外側マージンを適用する可能性があります。もちろん、特別に宣言すれば、既定のスタイルをオーバーライドできます。

値のコピー

覚えていますか？前の2つの節で値のコピーについて触れました。以下では、値のコピーを使用する方法を説明します。

時には、重複した値を入力することがあります：

p {margin: 0.5em 1em 0.5em 1em;}

値のコピーを使用すると、このペアの数字を繰り返し入力する必要はありません。以下の規則は以下の規則と同等です：

p {margin: 0.5em 1em;}

これら2つの値は前の4つの値を置き換えることができます。これはどうしてできるのでしょうか？CSSは、外側マージンに4つの値よりも少ない値を指定できるように了一些規則を定義しています。規則は以下の通りです：

  • 左外側マージンの値が欠けている場合、右外側マージンの値を使用します。
  • 下外側マージンの値が欠けている場合、上外側マージンの値を使用します。
  • 右外側マージンの値が欠けている場合、上外側マージンの値を使用します。

以下の図は、これをより直感的に理解するための方法を提供しています：

CSS 値コピー

言い換えれば、外側マージンに3つの値が指定された場合、4番目の値（左外側マージン）は2番目の値（右外側マージン）からコピーされます。2つの値が指定された場合、4番目の値は2番目の値からコピーされ、3番目の値（下外側マージン）は1番目の値（上外側マージン）からコピーされます。最後のケースでは、1つの値が指定された場合、他の3つの外側マージンはこの値（上外側マージン）からコピーされます。

このシンプルなメカニズムを使えば、4つの値すべてを適用する必要はなく、必要な値のみを指定するだけで良い。

h1 {margin: 0.25em 1em 0.5em;}        /* 等价于 0.25em 1em 0.5em 1em */
h2 {margin: 0.5em 1em;}        /* 等价于 0.5em 1em 0.5em 1em */
p {margin: 1px;}			/* 1px 1px 1px 1pxに等しい */

この方法には小さな欠点があります。最終的には、このような問題に直面するでしょう。例えば、p要素の上外側マージンと左外側マージンを20ピクセルに、下外側マージンと右外側マージンを30ピクセルに設定したい場合、このように書かなくてはなりません：

p {margin: 20px 30px 30px 20px;}

これであなたが望む結果を得ることができます。残念ながら、この場合、必要な値の数をさらに減らす方法はありません。

もう一つの例を見てみましょう。左外側マージン以外のすべての外側マージンがauto（左外側マージンは20px）に設定したい場合：

p {margin: auto auto auto 20px;}

同様に、これであなたが望む効果を得ることができます。問題は、これらのautoを入力するのが面倒なことです。要素の片側の外側マージンを制御するだけの場合、片側外側マージン属性を使用してください。

片側外側マージン属性

片側外側マージン属性を使用して、要素の片側の外側マージンに値を設定できます。例えば、p要素の左外側マージンを20pxに設定したい場合、marginを使用する必要はなく、以下のような方法を使用できます：

p {margin-left: 20px;}

以下のいずれかの属性を使用して、特定の側の外側マージンを設定し、他のすべての外側マージンに影響を与えずにすることができます：

ルールには、このような片側属性を複数使用できます。例えば：

h2 {
  margin-top: 20px;
  margin-right: 30px;
  margin-bottom: 30px;
  margin-left: 20px;
  }

もちろん、このような場合、marginを使用する方が簡単かもしれません：

p {margin: 20px 30px 30px 20px;}

片側属性を使用するか、marginを使用するかに関わらず、得られる結果は同じです。一般的に、複数の側にマージンを設定したい場合、marginを使用する方が簡単です。ただし、文書表示の観点からは、実際にどの方法を使用するかは重要ではありませんので、自分にとって簡単な方法を選ぶべきです。

ヒントとコメント

ヒント：NetscapeおよびIEでは、bodyタグに定義されたデフォルトのマージン（margin）値は8pxです。しかし、Operaはそうではありません。代わりに、Operaは内部パディング（padding）のデフォルト値を8pxに設定しており、したがって、ウェブサイト全体のエッジ部分を調整し、Operaで正しく表示するには、bodyのpaddingをカスタマイズする必要があります。

CSS 外側マージン例：

テキストの左外側マージンを設定
この例では、テキストの左外余白を設定する方法を示します。
テキストの右外余白を設定
この例では、テキストの右外余白を設定する方法を示します。
テキストの上外余白を設定
この例では、テキストの上外余白を設定する方法を示します。
テキストの下外余白を設定
この例では、テキストの下外余白を設定する方法を示します。
すべての外余白属性が一つの宣言で設定されています。
この例では、すべての外余白属性を一つの宣言で設定する方法を示します。

CSS 外余白属性

属性 説明
margin ショートカット属性。すべての外余白属性を一つの宣言で設定します。
margin-bottom 要素の下外余白を設定します。
margin-left 要素の左外余白を設定します。
margin-right 要素の右外余白を設定します。
margin-top 要素の上外余白を設定します。