margin-top
は CSS のプロパティで、要素の上側のマージン領域を設定します。正の数を指定すると、隣との間が遠くなるように配置され、負の数を指定すると、近くなるように配置します。
このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 https://github.com/mdn/interactive-examples をクローンしてプルリクエストを送信してください。
構文
/* <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
を参照してください。
公式定義
初期値 | 0 |
---|---|
適用対象 | table-caption , table , inline-table 以外の表の display 種別を除くすべての要素。。 ::first-letter and ::first-line にも適用されます。 |
継承 | なし |
パーセンテージ | 包含ブロックの幅 |
計算値 | 指定されたパーセンテージ値または絶対的な長さ |
アニメーションの種類 | length |
形式文法
<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 Level 2 (Revision 1) margin-top の定義 |
勧告 | ただしインライン要素での効果を削除。 |
CSS Level 1 margin-top の定義 |
勧告 | 初回定義 |
ブラウザーの互換性
BCD tables only load in the browser
このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。
関連情報
margin-right
,margin-bottom
,margin-left
とmargin
一括指定- 対応付けられる論理的プロパティ:
margin-block-start
,margin-block-end
,margin-inline-start
,margin-inline-end
および一括指定のmargin-block
とmargin-inline