CSS の margin-top プロパティは、要素の上側のマージン領域を設定します。正の数を指定すると、隣との間が遠くなるように配置され、負の数を指定すると、近くなるように配置されます。
/* <length> 値 */ margin-top: 10px; /* 絶対的な寸法 */ margin-top: 1em; /* 文字の大きさからの相対 */ margin-top: 5%; /* 直近のブロックコンテナーの幅からの相対 */ /* キーワード値 */ margin-top: auto; /* グローバル値 */ margin-top: inherit; margin-top: initial; margin-top: unset;
| 初期値 | 0 |
|---|---|
| 適用対象 | table-caption, table, inline-table 以外の表の display 種別を除くすべての要素。。 ::first-letter にも適用されます。 |
| 継承 | なし |
| パーセンテージ | 包含ブロックの幅 |
| メディア | 視覚 |
| 計算値 | 指定されたパーセンテージ値または絶対的な長さ |
| アニメーションの種類 | length |
| 正規順序 | 形式文法で定義される一意のあいまいでない順序 |
構文
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 の定義 |
勧告 | 初回定義。 |
ブラウザー実装状況
このページの互換性一覧表は構造化データから生成されます。データに協力したいのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。