簡単な例。

CSS : marginの例
.margin  {
    margin:  20px;
}
HTML : 適用するHTML
<div class="outside">
    <div>マージンなし</div>
</div>
<div class="outside">
    <div class="margin">マージンあり</div>
</div>
実行結果
マージンなし
マージンあり

このページでは、内側の<div>要素marginを設定している。外側の<div>要素は見やすくするため。

このページで解説するコードの実行結果。

px0
px1
px3
px5
px10
px15
px20
引き数が0
引き数が1
引き数が2
引き数が3
引き数が4
sample
sample
margin0

なお、見た目のため、このページの実行結果には「下のCSSコードも」適用している。

CSS : デフォルトCSS
div {
    display:            inline-block;           /*  横並び  */
    vertical-align:     top;                    /*  上揃え */
    padding:            10px;                   /*  内側の余白  */
    border:             6px solid royalblue;    /*  境界線  */
}
.outside {                                  /*  外側のdiv要素  */
    margin:             10px;               /*  外側の余白  */
    padding:            0;                  /*  内側の余白なし  */
    border-color:       plum;               /*  境界線の色  */
}

marginの概要

「外側の余白(マージン)」を指定する。

marginプロパティには、外側の幅を数値(+ 単位)で指定する。 デフォルト値は「0」。

引き数の数(最大4)により、上下左右を個別に指定ができる。

引き数が1つ

CSS : 引き数が1つ
.px0  {    margin:  0;      }
.px1  {    margin:  1px;    }
.px3  {    margin:  3px;    }
.px5  {    margin:  5px;    }
.px10 {    margin:  10px;   }
.px15 {    margin:  15px;   }
.px20 {    margin:  20px;   }
HTML : 適用するHTML
<div class="outside"><div class="px0">  px0 </div></div>
<div class="outside"><div class="px1">  px1 </div></div>
<div class="outside"><div class="px3">  px3 </div></div>
<div class="outside"><div class="px5">  px5 </div></div>
<div class="outside"><div class="px10"> px10 </div></div>
<div class="outside"><div class="px15"> px15 </div></div>
<div class="outside"><div class="px20"> px20 </div></div>
実行結果
px0
px1
px3
px5
px10
px15
px20

引き数が複数

CSS : 引き数が複数
.margin-0 {    margin:  ;                    }
.margin-1 {    margin:  5px;                    }
.margin-2 {    margin:  5px 30px;               }
.margin-3 {    margin:  5px 30px 20px;          }
.margin-4 {    margin:  5px 30px 20px 50px;     }
HTML : 適用するHTML
<div class="outside"><div class="margin-0 ">  引き数が0  </div></div>
<div class="outside"><div class="margin-1 ">  引き数が1  </div></div>
<div class="outside"><div class="margin-2 ">  引き数が2  </div></div>
<div class="outside"><div class="margin-3 ">  引き数が3  </div></div>
<div class="outside"><div class="margin-4 ">  引き数が4  </div></div>
実行結果
引き数が0
引き数が1
引き数が2
引き数が3
引き数が4
引き数の数第一引き数第二引き数第三引き数第四引き数
1上下左右---
2上下左右--
3左右-
4

マージンを消したい場合

margin0を上書きする。単位は不要。

CSS : マージンを消す
.sample {    
    margin:  15px;                    
}
.margin0 {
    margin:  0;                    
}
HTML : 適用するHTML
<div class="outside">
    <div class="sample">
        sample
    </div>
</div>
<div class="outside">
    <div class="sample margin0">
        sample <br> margin0
    </div>
</div>
実行結果
sample
sample
margin0

Emmet : m

記述Visual Studio Code
mmargin: ;
m5margin: 5px;
m:amargin: auto;