margin-top
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
試してみましょう
構文
css
/* <length> 値 */
margin-top: 10px; /* 絶対的な寸法 */
margin-top: 1em; /* 文字の寸法からの相対 */
margin-top: 5%; /* 直近のブロックコンテナーの幅からの相対 */
/* キーワード値 */
margin-top: auto;
/* グローバル値 */
margin-top: inherit;
margin-top: initial;
margin-top: revert;
margin-top: revert-layer;
margin-top: unset;
margin-top
プロパティは auto
キーワード、または <length>
や <percentage>
で指定されます。正の数、ゼロ、負の数が指定できます。
値
<length>
-
マージンの寸法を固定値で表したものです。
<percentage>
-
マージンの寸法を包含ブロックのインラインサイズ(
writing-mode
で横書き言語と定義されている場合は width)に対するパーセント値で示したものです。 auto
-
ブラウザーが適切な値を選択して使用します。
margin
を参照してください。
公式定義
初期値 | 0 |
---|---|
適用対象 | table-caption , table , inline-table 以外の表の display 種別を除くすべての要素。 ::first-letter にも適用されます。 |
継承 | なし |
パーセント値 | 包含ブロックの幅に対する相対値 |
計算値 | 指定されたパーセント値または絶対的な長さ |
アニメーションの種類 | length |
形式文法
margin-top =
<length-percentage> |
auto |
<anchor-size()>
<length-percentage> =
<length> |
<percentage>
<anchor-size()> =
anchor-size( [ <anchor-name> || <anchor-size> ]? , <length-percentage>? )
<anchor-name> =
<dashed-ident>
<anchor-size> =
width |
height |
block |
inline |
self-block |
self-inline
例
正と負の上マージンの設定
css
.content {
margin-top: 5%;
}
.side-box {
margin-top: 10px;
}
.logo {
margin-top: -5px;
}
#footer {
margin-top: 1em;
}
仕様書
Specification |
---|
CSS Box Model Module Level 3 # margin-physical |
ブラウザーの互換性
BCD tables only load in the browser