概要へ移動

簡単な例。

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
引き数が複数
引き数が０
引き数が１
引き数が２
引き数が３
引き数が４
マージンを消す
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」。

引き数の数（最大４）により、上下左右を個別に指定ができる。

引き数が１つ

CSS : 引き数が１つ
.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 ">  引き数が０  </div></div>

<div class="outside"><div class="margin-1 ">  引き数が１  </div></div>

<div class="outside"><div class="margin-2 ">  引き数が２  </div></div>

<div class="outside"><div class="margin-3 ">  引き数が３  </div></div>

<div class="outside"><div class="margin-4 ">  引き数が４  </div></div>
実行結果
引き数が０
引き数が１
引き数が２
引き数が３
引き数が４
引き数の数第一引き数第二引き数第三引き数第四引き数
1上下左右---
2上下左右--
3上左右下-
4上右下左

マージンを消したい場合

marginに0を上書きする。単位は不要。

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;