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.

* Some parts of this feature may have varying levels of support.

margin-bottomCSS のプロパティで、要素の下側のマージン領域を設定します。正の数を指定すると、隣との間が遠くなるように配置され、負の数を指定すると、近くなるように配置します。

試してみましょう

要素ボックスにおける CSS の margin-bottom プロパティの効果

このプロパティは、 <span> または <code> のような非置換のインライン要素には効果がありません。

構文

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">ボックス 0</div>
  <div class="box1">ボックス 1</div>
  <div class="box2">ボックス 1 の負のマージンがこのボックスを引き上げています</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

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
margin-bottom
anchor-size()
Experimental
auto

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
In development. Supported in a pre-release version.
In development. Supported in a pre-release version.
No support
No support
Experimental. Expect behavior to change in the future.
See implementation notes.

関連情報