margin-top - 上方向のマージン幅を指定する

投稿日:2016/02/22 / 更新日:2016/02/22

スタイルシートのmargin-topは、要素の上スペースの幅を指定するためのプロパティです。

サンプルコード

margin-topを指定したサンプルコードです。

div {
	margin-top: 50px ;
}

デモ

margin-topを指定したデモです。正の数を指定すると周りの要素から自分がその分、遠ざかります。0pxを指定すると、自分が相手にピッタリとくっつきます。逆に、負の数を指定すると相手の要素に向かって近寄ってきます。これをネガティブマージンと言います。ネガティブマージンで自分が相手に向かって近寄っていくのは、左側(margin-left)と上側(margin-top)だけなのでご注意下さい。

RUN
HTML
CSS
JavaScript

<p>茶色に<code>margin-top: 50px</code>を指定</p> <div class="parent"> <div class="other-element"></div> <div class="element-1"></div> <p class="infomation">50px</p> </div> <p>茶色に<code>margin-top: 0px</code>を指定</p> <div class="parent"> <div class="other-element"></div> <div class="element-2"></div> <p class="infomation">50px</p> </div> <p>茶色に<code>margin-top: -25px</code>を指定</p> <div class="parent"> <div class="other-element"></div> <div class="element-3"></div> <p class="infomation">50px</p> </div>

.element-1 { margin-top: 50px ; } .element-2 { margin-top: 0 ; } .element-3 { margin-top: -25px ; opacity: .75 ; } .element-1 , .element-2 , .element-3 , .other-element { height: 50px ; background: #D36015 ; } .other-element { background: #2660A1 ; } .parent { position: relative ; width: 120px ; margin: 0 auto 50px ; } .infomation { position: absolute ; top: 49px ; left: -50px ; margin: 0 ; width: 50px ; height: 50px ; line-height: 50px ; font-size: .8rem ; border-top: 1px solid #000 ; border-bottom: 1px solid #000 ; } p { text-align: center ; }

値の指定

指定できる値の説明は下記の通りです。リンクをクリックするとデモを確認できます。

項目	説明
inherit	親要素の値を引き継ぐ。例の場合、`div`要素の`margin-top`には、`body`に指定された値(`50px`)が引き継がれる。
initial	プロパティの初期値が適用される。この場合、値は`0`(余白なし)となる。
auto	上方向、下方向の場合、`auto`を指定すると、余白は0pxになる。
percentage	包含ブロックの横幅(`width`)に対するパーセンテージで指定する。例えば、包含ブロックの横幅が100pxの要素に`50%`を指定した場合、50pxのスペースが設定される。パーセンテージの元となるのが、その要素自体ではなく、包含ブロック(一番近い、自分を囲むブロック要素)である点に留意しましょう。`body`直下にある要素にパーセンテージを指定した場合、対象になるのは`body`の横幅となります。
length	`px`や`em`など、CSSで許可されている単位を利用してサイズを指定します。(単位の一覧)

ブラウザのサポート

2016年7月現在の、ブラウザのサポート状況は次の通りです。全ての主要ブラウザで、ベンダープレフィクスなど気にすることなく利用できます。

Chrome
●
-
時期不明
Firefox
●
-
時期不明
Safari
●
-
時期不明
Ie
●
-
時期不明
Edge
●
-
時期不明
Opera
●
-
時期不明
Safari(iOS)
●
-
時期不明
Ie Mobile
●
-
時期不明
Chrome
●
-
時期不明
Android
●
-
時期不明
FF Mobile
●
-
時期不明
Opera Mobile
●
-
時期不明