margin-top
margin-top
は CSS のプロパティで、要素の上側のマージン領域を設定します。正の数を指定すると、隣との間が遠くなるように配置され、負の数を指定すると、近くなるように配置します。
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
構文
/* <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 および::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
関連情報
margin-right
,margin-bottom
,margin-left
とmargin
一括指定- 対応付けられる論理的プロパティ:
margin-block-start
,margin-block-end
,margin-inline-start
,margin-inline-end
および一括指定のmargin-block
とmargin-inline