ボックスの最も外側に有る余白を調整する為のプロパティです。
margin-の後に方向（leftとか）を指定する事で指定した方向に余白を取る事ができます。

対応ブラウザ

• 
• 
• 
• 
• 
• 
• 

プロパティの解説

値

<長さ>｜<パーセント>｜<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-top: 10px;
  margin-right: auto;
  margin-bottom: 50px;
  margin-left: auto;
  padding: 10px;
  background: #ccc;
}

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

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

.item p.sample02 {
  margin-top: 20px;
  margin-right: 20px;
  margin-bottom: 20px;
  margin-left: 20px;
}

.item p.sample03 {
  margin-top: 20px;
  margin-right: 100px;
  margin-bottom: 0;
  margin-left: 100px;
}

.item p.sample04 {
  margin-top: 50px;
  margin-right: 10px;
  margin-bottom: 50px;
  margin-left: 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

このサンプルでは上下左右を個別に指定していますが、個別に指定していると効率が悪くなってしまうで、そのような場合は、marginプロパティを使う事で一括指定ができます。