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 にも適用されます。
継承なし
パーセンテージ包含ブロックの幅
メディア視覚
計算値指定されたパーセンテージ値または絶対的な長さ
アニメーションの種類length
正規順序形式文法で定義される一意のあいまいでない順序

ブラウザーの対応

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

凡例

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

ドキュメントのタグと貢献者

最終更新者: mdnwebdocs-bot,