このページでは、marginプロパティの知識を前提として、下表のCSSプロパティの解説をする。

CSSプロパティ対象
margin-top上辺の外側の余白
margin-right右辺の外側の余白
margin-bottom下辺の外側の余白
margin-left左辺の外側の余白
top
right
bottom
left

なお、見た目のため、このページの実行結果には「下の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プロパティで指定した基本のマージンの一部を変更するために使う。

例。

CSS : 例
.base   {    margin:    10px ;      }
.top    {    margin-top:    40px ;  }
.right  {    margin-right:  40px ;  }
.bottom {    margin-bottom: 40px ;  }
.left   {    margin-left:   40px ;  }
HTML : 適用するHTML
<div class="outside">
    <div class="base"> base </div>
</div>
<div class="outside">
    <div class="base top"> base <br> top </div>
</div>
<div class="outside">
    <div class="base right"> base <br> right </div>
</div>
<div class="outside">
    <div class="base bottom"> base <br> bottom </div>
</div>
<div class="outside">
    <div class="base left"> base <br> left </div>
</div>
実行結果
base
base
top
base
right
base
bottom
base
left

クラスにmarginプロパティの設定を組み込んだ例。結果は同じだが、margin: 10px ;を複数回書いているので、保守性が悪いことに注意。

CSS : 例
.top    {    
    margin:         10px ;
    margin-top:     40px ;
}
.right    {    
    margin:         10px ;
    margin-right:   40px ;
}
.bottom    {    
    margin:         10px ;
    margin-bottom:  40px ;
}
.left    {    
    margin:         10px ;
    margin-left:    40px ;
}
HTML : 適用するHTML
<div class="outside">
    <div class="top">       top </div>
</div>
<div class="outside">
    <div class="right">     right </div>
</div>
<div class="outside">
    <div class="bottom">    bottom </div>
</div>
<div class="outside">
    <div class="left">      left </div>
</div>
実行結果
top
right
bottom
left

Emmet

記述Visual Studio Code
mtmargin-top: ;
mrmargin-right: ;
mbmargin-bottom: ;
mlmargin-left: ;
mt5margin-top: 5px;
mr5margin-right: 5px;
mb5margin-bottom: 5px;
ml5margin-left: 5px;