marginプロパティは各辺のマージンを一括で指定できる簡略化表記です。
各値は、半角スペースなどの空白類文字で区切って書きます。

この簡略化表記をショートハンドと言い、宣言を効率よく書くために必要な知識なのでぜひ、覚えておきましょう。

対応ブラウザ

• 
• 
• 
• 
• 
• 
• 

プロパティの解説

値

<長さ>｜<パーセント>｜<auto>｜inherit

初期値

0

適用される要素

全ての要素（テーブルの内部要素は除く）

継承

しません

パーセント値

包含ブロックの横幅に対する割合

メディア

visual

値の解説

<長さ>

マージンを長さの単位で指定します（15pxなど）。マイナス値の指定も可能です。

<パーセント>

マージンを包含ブロックの横幅に対する割合をパーセントで指定します。マイナス値の指定も可能です。

auto

状況に応じて自動的にマージンが算出されます。

値 auto に関して

marginの値にautoを指定した場合どのような計算でマージンが算出されるかをざっくり説明しておきます。
詳細に関しては、下記リンクを参考にしてください。

• インライン要素、フロート要素の上下左右のマージンは常に0になります。
• 通常フローのブロックレベル要素の上下マージンは0になります。
• 通常フローのブロックレベル要素の左右マージンがautoの場合は、左右で同じマージンになります。（これにより全体をセンタリングすると言った事が可能）
• 右が0で左がautoの場合右寄りに。逆にすると左寄りになります。

• 附録：CSS2.1の視覚整形モデル詳細
• 10.3 内容領域の幅と水平方向のマージンを計算する
• 10.6 内容領域の高さと垂直方向のマージンを計算する

マージンの相殺に関して

上下のマージンは、通常フローのブロックレベル要素の場合、マージンが相殺されます。
マージンの相殺に関しては、以下をご覧ください。

• マージンの相殺【ボックスモデル｜CSSの基本】

marginのサンプル

.item {
  width: 400px;
  margin: 10px auto 50px;
  padding: 10px;
  background: #ccc;
}

.item p {
  margin-bottom: 15px;
  background: #fff;
}

.item p.sample01 {
  margin-left: 50px;
}

.item p.sample02 {
  margin: 20px;
}

.item p.sample03 {
  margin: 20px 100px 0;
}

.item p.sample04 {
  margin: 50px 10px;
}

.item p.sample05 {
  margin-left: -20px;
}

<div class="item">
<p>マージンのサンプル default</p>
<p class="sample01">マージンのサンプル 01</p>
</div>

<div class="item">
<p class="sample02">マージンのサンプル 02</p>
<p class="sample03">マージンのサンプル 03</p>
<p class="sample04">マージンのサンプル 04</p>
<p class="sample05">マージンのサンプル 05</p>
</div>

このサンプルを今見ているブラウザで表示すると以下のようになります。

サンプルのブラウザ上の表示

マージンのサンプル default

マージンのサンプル 01

マージンのサンプル 02

マージンのサンプル 03

マージンのサンプル 04

マージンのサンプル 05

一括指定する事で個別指定に比べソースも短く済みます。