margin-top
、 margin-right
、 margin-bottom
、 margin-left
CSSプロパティ
このページでは、margin
プロパティの知識を前提として、下表のCSSプロパティの解説をする。
CSSプロパティ | 対象 |
---|---|
margin-top | 上辺の外側の余白 |
margin-right | 右辺の外側の余白 |
margin-bottom | 下辺の外側の余白 |
margin-left | 左辺の外側の余白 |
例
top
right
bottom
left
なお、見た目のため、このページの実行結果には「下のCSSコードも」適用している。
概要
特定の辺(上下左右)のマージンを指定したい場合に使う。
基本的に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
top
base
right
right
base
bottom
bottom
base
left
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 |
---|---|
mt | margin-top: ; |
mr | margin-right: ; |
mb | margin-bottom: ; |
ml | margin-left: ; |
mt5 | margin-top: 5px; |
mr5 | margin-right: 5px; |
mb5 | margin-bottom: 5px; |
ml5 | margin-left: 5px; |