概要へ移動

このページでは、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;