CSS プロパティ margin-bottom

CSSプロパティ margin-bottom：要素の下余白を制御する

概要

`margin-bottom` プロパティは、要素の下部に適用される外側の余白を設定します。余白は、背景色で塗りつぶされない透明な領域であり、要素の周囲にスペースを作成します。

適用対象:すべての要素

継承: しない

構文


/* <長さ> 値 */
margin-bottom: 10px;
margin-bottom: 1em;

/* <パーセンテージ> 値 */
margin-bottom: 5%;

/* キーワード */
margin-bottom: auto;

/* グローバル値 */
margin-bottom: inherit;
margin-bottom: initial;
margin-bottom: unset;

プロパティ値

値	説明
`<長さ>`	px、em、remなどの単位を使用して、固定の下余白を定義します。
`<パーセンテージ>`	包含ブロックの幅に対する割合で下余白を指定します。
`auto`	ブラウザが自動的に下余白を計算します。水平方向のセンタリングなどに使用されます。
`inherit`	親要素から`margin-bottom`プロパティの値を継承します。
`initial`	`margin-bottom`プロパティを初期値に設定します。
`unset`	`margin-bottom`プロパティが継承されている場合は`inherit`、そうでない場合は`initial`と同じ動作をします。

使用例

1. 固定長の `margin-bottom` を設定する


<!DOCTYPE html>
<html>
<head>
<style>
.box {
  background-color: lightblue;
  width: 100px;
  margin-bottom: 50px;
}
</style>
</head>
<body>

<div class="box">このdiv要素の下余白は50pxです。</div>

</body>
</html>

この例では、`.box`クラスを持つdiv要素に、50pxの下余白が設定されています。

2. パーセンテージを使用して `margin-bottom` を設定する


<!DOCTYPE html>
<html>
<head>
<style>
.container {
  width: 500px;
  border: 1px solid black;
}
.box {
  background-color: lightblue;
  width: 100px;
  margin-bottom: 10%; /* 親要素.containerの幅に対する割合 */
}
</style>
</head>
<body>

<div class="container">
  <div class="box">このdiv要素の下余白は、親要素の幅の10%です。</div>
</div>

</body>
</html>

この例では、`.box`クラスを持つdiv要素に、親要素（`.container`）の幅の10%に相当する下余白が設定されています。

3. `auto` を使用して垂直方向にセンタリングする


<!DOCTYPE html>
<html>
<head>
<style>
.container {
  height: 200px;
  border: 1px solid black;
  display: flex;
  justify-content: center;
  align-items: center;
}

.box {
  background-color: lightblue;
  width: 100px;
  height: 100px;
  margin: auto; /* 上下左右の余白をすべてautoに設定 */
}
</style>
</head>
<body>

<div class="container">
  <div class="box"></div>
</div>

</body>
</html>

この例では、`.box`クラスを持つdiv要素は、フレックスボックスレイアウトを使用して、親要素（`.container`）内で垂直方向にセンタリングされています。

注意事項

* `margin-bottom` は、インライン要素および置換要素以外では効果がありません。 * ある要素の下余白と別の要素の上余白が重なる場合、**余白の相殺**が発生します。詳細については、[余白の相殺](https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing)を参照してください。

まとめ

`margin-bottom`プロパティは、要素間の垂直方向の間隔を制御するための重要なツールです。これを使用すると、より美しく、保守しやすいWebページレイアウトを作成できます。

関連するQ&A

**Q1: `margin-bottom` と `padding-bottom` の違いは何ですか？** **A1:** `margin-bottom` は要素の**外側**に余白を作成し、`padding-bottom` は要素の**内側**にパディングを作成します。余白は透明で背景色は適用されませんが、パディングは要素の背景色で塗りつぶされます。 **Q2: `margin-bottom` が効かない場合はどうすればよいですか？** **A2:** 考えられる原因はいくつかあります。 * 要素がインライン要素または置換要素である。 * 親要素に高さや表示形式が適切に設定されていない。 * 余白の相殺が発生している。これらの原因を特定し、適切な対処をする必要があります。 **Q3: `margin-bottom` を使用してフッターをページの下部に固定するにはどうすればよいですか？** **A3:** `margin-bottom` 単独では、フッターをページの下部に固定することはできません。フッターを固定するには、他のCSSプロパティと組み合わせて使用するか、JavaScriptを使用する必要があります。