Cascading Style Sheets margin property.
marginプロパティは、要素の上下左右、全四辺のマージンをまとめて指定する際に使用します。これはすべての個別マージン（margin-top, margin-right, margin-bottom, margin-left）の一括指定です。
marginはパディング（padding）とセットで覚えるのが良いと思います。
マージン10px
パディング10px
マージン10px、パディング10px
marginは要素の周りの領域にスペースを作成します。それに対して、paddingは要素内の領域にスペースを作成します。
top および bottom のマージンは、<span> または <code> などの置換要素ではないインライン要素には効果がありません。
/* 四辺すべてに適用 */
margin: 1em;
margin: -3px;
/* 上下 | 左右 */
margin: 5% auto;
/* 上 | 左右 | 下 */
margin: 1em auto 2em;
/* 上 | 右 | 下 | 左 */
margin: 2px 1em 0 auto;
/* グローバル値 */
margin: inherit;
margin: initial;
margin: unset;
marginプロパティは 1～4つの値を使って指定することができます。複数の値を指定する場合は、半角スペースで区切って指定します。それぞれの値は <length>、<percentage>、または autoキーワードです。
尚、marginには負の値を指定することもできます。marginに負の値を指定することで、要素を既定よりも隣と近づけて描画したり、複数の領域を重ねて表示させることが可能ですが、重なり順や重ね位置がブラウザによって異なるため、注意が必要です。
マージン10px
マージン10px、パディング10px
上下10px、左右20px
上10px、左右20px、下30px
上10px、右20px、下30px、左40px
HTML sample
<p class="sample1">マージン10px</p>
<p class="sample2">マージン10px、パディング10px</p>
<p class="sample3">上下10px、左右20px</p>
<p class="sample4">上10px、左右20px、下30px</p>
<p class="sample5">上10px、右20px、下30px、左40px</p>
CSS sample
p.sample1 {
background-color: #f19ec2;
margin: 10px;
}
p.sample2 {
background-color: #f19ec2;
margin: 10px;
padding: 10px;
}
p.sample3 {
background-color: #f19ec2;
margin: 10px 20px;
}
p.sample4 {
background-color: #f19ec2;
margin: 10px 20px 30px;
}
p.sample5 {
background-color: #f19ec2;
margin: 10px 20px 30px 40px;
}