margin-top

CSSmargin-top プロパティは、要素の上側のマージン領域を設定します。正の数を指定すると、隣との間が遠くなるように配置され、負の数を指定すると、近くなるように配置します。

このプロパティは、 <span> または <code> のような置換のインライン要素には効果がありません。

構文

/* <length> 値 */
margin-top: 10px;  /* 絶対的な寸法 */
margin-top: 1em;   /* 文字の寸法からの相対 */
margin-top: 5%;    /* 直近のブロックコンテナーの幅からの相対 */

/* キーワード値 */
margin-top: auto;

/* グローバル値 */
margin-top: inherit;
margin-top: initial;
margin-top: unset;

margin-top プロパティは auto キーワード、または <length><percentage> で指定されます。正の数、ゼロ、負の数が指定できます。

<length>
固定値によるマージンの寸法です。
<percentage>
包含ブロックの width に対するパーセントによるマージンの寸法です。
auto
ブラウザ―が適切な値を選択して使用します。 margin を参照してください。

形式文法

<length> | <percentage> | auto

.content { margin-top:   5%; }
.sidebox { margin-top: 10px; }
.logo    { margin-top: -5px; }
#footer  { margin-top:  1em; } 

仕様書

仕様書 状態 備考
CSS Basic Box Model
margin-top の定義
草案 CSS 2.1 から目立った変更なし。
CSS Transitions
margin-top の定義
草案 margin-top がアニメーション可能と定義。
CSS Level 2 (Revision 1)
margin-top の定義
勧告 CSS1 と同様、ただしインライン要素での効果は削除。
CSS Level 1
margin-top の定義
勧告 初回定義
初期値0
適用対象table-caption, table, inline-table 以外の表の display 種別を除くすべての要素。。 ::first-letter and ::first-line にも適用されます。
継承なし
パーセンテージ包含ブロックの幅
計算値指定されたパーセンテージ値または絶対的な長さ
アニメーションの種類length

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
margin-topChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 完全対応 3Opera 完全対応 3.5Safari 完全対応 1WebView Android 完全対応 1Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 10.1Safari iOS 完全対応 1Samsung Internet Android 完全対応 1.0
autoChrome 完全対応 1Edge 完全対応 12
補足
完全対応 12
補足
補足 The auto value is not supported in quirks mode.
Firefox 完全対応 1IE 完全対応 6
補足
完全対応 6
補足
補足 The auto value is not supported in quirks mode.
Opera 完全対応 3.5Safari 完全対応 1WebView Android 完全対応 37Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 14Safari iOS 完全対応 1Samsung Internet Android 完全対応 1.0

凡例

完全対応  
完全対応
実装ノートを参照してください。
実装ノートを参照してください。