マージン (Margin properties)

 
ボックスモデル
ホーム > CSS2 Note > マージン
C1- ie3- N4-

説明

margin: top right bottom leftC1- ie3- N4-

margin-top: top;       C1- ie3- N4-
margin-right: right;   C1- ie3- N4-
margin-bottom: bottomC1- ie4- N4-
margin-left: left;     C1- ie3- N4-
値:  [ <長さ> | <%値> | auto ] | inherit
初期値:0適用要素:すべて継承:しない%値:包含ブロックを参照メディア:ビジュアル
マージンのプロパティは、ボックスのマージン幅を指定します。簡略化プロパティ「margin」は、四辺のマージン幅を半角スペース[ ]区切りの値で同時に指定できます。その他のプロパティは各辺のマージン幅を指定します。

マージンには負の値を指定することもできます。
 
 

簡略化プロパティ「margin」について



簡略化プロパティ「margin」は、値が1つのとき上右下左のマージンに適用されます。値が2つのとき、1つ目が上下、2つ目が右左のマージンに適用されます。値が3つのとき、1つ目が上、2つ目が右左、3つ目が下のマージンに適用されます。値が4つのとき上から時計回りに上、右、下、左のマージンに適用されます。

すなわち、値は上から時計回りに適用され、空白の値は、反対側の値によって補われます。
値の適用
 

使用例

body {margin:2em}
h1 {margin-top:2em; margin-bottom:2em}
 

マージンの値 <margin-width>

長さ C1- ie3- N4- マージン幅を指定。
ページボックスにおいては、フォントの概念を扱わないので[em][ex]といった単位は使用できません。
%値 C1- ie3- N4- 上位要素の包含ブロックの横幅に対する割合で上下左右のマージンを指定。上下のマージンについても横幅を参照することに注意してください。
ページボックスにおいては、上下のマージンは高さに対する割合となり、左右のマージンは横幅に対する割合になります。
auto  C1- ie3- N4- CSSの算出方法によって自動的に調整されます。インライン要素の各マージンとブロック要素の上下のマージンに「auto」を指定した際の値は「0」となります。また、ブロック要素の左右のマージンを「auto」に指定することで、ボックスをセンタリングすることができます。ただし、IEの「互換モード」ではセンタリングされません。
 

マージンの相殺(そうさい)



上下に並んだ複数のブロック要素ボックス間においてはマージンの相殺(そうさい)が行われ、隣接するマージンの最大値が相殺後のマージンとして用いられます。正負の値が混在する場合には、正の最大値と負の最小値を足した値がマージンとなります。正の値が存在しない場合には、隣接するマージンの最小値がマージンとして用いられます。
マージンの相殺
ただし、floatプロパティを指定されたボックス(浮動体)および、positionプロパティによって絶対配置、相対配置されたボックスにおいては、マージンの相殺は行われません。
 

マージンに1つの値

 

マージンに1つ以上の値

 

マージン、上、右、下、左

 
 

コンテンツをウィンドウの表示領域全体にぴったりと表示させたい場合



一般的なブラウザでは、body要素に「8px」程度のマージンが設定され、パディングは「0」に指定されています。しかしながら、Opera6では、逆にマージンが「0」に設定され、パディングがある程度設定されています。そのため、Opera6においてもbody要素のコンテンツをウィンドウの表示領域全体にぴったりと表示させたい場合などには、マージンだけでなくパディングも「0」に指定しておく必要があります。
body {
  margin:0;
  padding:0;  /* for opera6 */
}
*1 現行のOpera9では改善されています(2007/01/10)。
 
 

センタリング



ブラウザの「互換モード」におけるセンタリングは、一般的にcenter要素div要素などを用いて行います。
<center>
こんにちは こんにちは こんにちは こんにちは
</center>

<div align="center">
こんにちは こんにちは こんにちは こんにちは
</div>
ただし、<center>-</center>、<div align="center">-</div>は、HTMLの文法上非推奨なマーク付けとなります。

ブラウザの「標準モード」におけるセンタリングは、一般的にスタイルシートを用います。ブロック要素内のインライン要素に対してはtext-align:center、ブロック要素に対してはmargin:autoを用いて行います。
<div style="text-align:center">
こんにちは こんにちは こんにちは こんにちは
</div>

<table border="1" style="margin:auto">
<tbody>
<tr><td>データ</td><td>データ</td></tr>
<tr><td>データ</td><td>データ</td></tr>
</tbody>
</table>
IEの「互換モード」では、margin:autoは無視されるのでブラウザの表示モードには十分注意を払ってください。

HTMLの文法上は大間違いになりますが、非推奨なマーク付けが基本的に無視される「標準モード」において、非推奨なマーク付けを禁止するStrictなDTDの宣言を行い、center要素div要素によるセンタリングをマーク付けした際にも、ie8 ff3 o9 sf4 gc2 N7各ブラウザにおいてセンタリングは行われます。

*1 本来的には、HTMLのバージョンを示す<!DOCTYPE>によって、マークアップ分けすべきです。
 
関連項目: margin | padding | border | border-width | border-color | border-style
トップページ CSS2 Note ページトップ
 2005/09/22発行 2009/09/01更新