margin-bottom
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-bottom: 10px; /* 絶対的な寸法 */
margin-bottom: 1em; /* 文字の寸法からの相対 */
margin-bottom: 5%; /* 直近のブロックコンテナーの幅からの相対 */
/* キーワード値 */
margin-bottom: auto;
/* グローバル値 */
margin-bottom: inherit;
margin-bottom: initial;
margin-bottom: revert;
margin-bottom: revert-layer;
margin-bottom: unset;
margin-bottom
プロパティは auto
キーワード、または <length>
や <percentage>
で指定されます。正の数、ゼロ、負の数が指定できます。
値
<length>
-
マージンの寸法を固定値で表したものです。
<percentage>
-
マージンの寸法を包含ブロックのインラインサイズ(
writing-mode
で横書き言語と定義されている場合は width)に対するパーセント値で示したものです。 auto
-
ブラウザ―が適切な値を選択して使用します。
margin
を参照してください。
公式定義
初期値 | 0 |
---|---|
適用対象 | table-caption , table , inline-table 以外の表の display 種別を除くすべての要素。 ::first-letter にも適用されます。 |
継承 | なし |
パーセント値 | 包含ブロックの幅に対する相対値 |
計算値 | 指定されたパーセント値または絶対的な長さ |
アニメーションの種類 | length |
形式文法
margin-bottom =
<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
例
正および負の数の下側のマージンの設定
HTML
html
<div class="container">
<div class="box0">Box 0</div>
<div class="box1">Box 1</div>
<div class="box2">Box one's negative margin pulls me up</div>
</div>
CSS
div に margin-bottom と height を設定する CSS です。
css
.box0 {
margin-bottom: 1em;
height: 3em;
}
.box1 {
margin-bottom: -1.5em;
height: 4em;
}
.box2 {
border: 1px dashed black;
border-width: 1px 0;
margin-bottom: 2em;
}
包含要素と div の定義の一部です。これによってマージンの効果がより明確に見えます。
css
.container {
background-color: orange;
width: 320px;
border: 1px solid black;
}
div {
width: 320px;
background-color: gold;
}
結果
仕様書
Specification |
---|
CSS Box Model Module Level 3 # margin-physical |
ブラウザーの互換性
BCD tables only load in the browser
関連情報
margin-top
,margin-right
,margin-left
とmargin
一括指定- 対応する論理的プロパティ:
margin-block-start
,margin-block-end
,margin-inline-start
,margin-inline-end
および一括指定のmargin-block
とmargin-inline