margin-bottomプロパティは何に使用されますか？

margin-bottomプロパティは、要素の下側に余白を設定するために使用されます。

margin-bottomの指定方法にはどのようなものがありますか？

margin-bottomは、px、em、rem、%、auto、さらには負の値など、さまざまな単位で設定できます。

margin-bottomを使用する際の注意点は何ですか？

マージンの相殺やレイアウトのずれが発生する可能性があるため、意図しない見た目にならないように設定を確認することが重要です。

【CSS】margin-bottom プロパティの使い方 - 要素の下側に余白を設定する方法

概要

margin-bottomプロパティは、CSSで要素の下側に余白（マージン）を設定するためのプロパティです。要素とその下にある他の要素との間にスペースを作り、レイアウトを整えるために使用されます。

この記事では、margin-bottomの基本的な使い方から、実践的なデザインパターン、マージン相殺の対処法まで詳しく解説します。

margin-bottomの基本

基本構文

/* 長さの値 */
margin-bottom: 20px;
margin-bottom: 1.5em;
margin-bottom: 2rem;

/* パーセンテージ */
margin-bottom: 10%;

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

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

値の種類

値	説明
`px`	固定のピクセル値
`em`	親要素のフォントサイズに対する相対値
`rem`	ルート要素のフォントサイズに対する相対値
`%`	親要素の幅に対するパーセンテージ
`auto`	ブラウザが自動計算
負の値	要素を上方向に移動させる

基本的な使用例

見出しと段落の間隔

<article>
  <h1>記事のタイトル</h1>
  <p>これは記事の本文です。margin-bottomを使って要素間の間隔を調整します。</p>
  <p>複数の段落がある場合も、適切な余白で読みやすくなります。</p>
</article>

article h1 {
  margin-bottom: 24px;
  font-size: 32px;
}

article p {
  margin-bottom: 16px;
  line-height: 1.8;
}

/* 最後の要素の余白を削除 */
article p:last-child {
  margin-bottom: 0;
}

カードリスト

<div class="card-list">
  <div class="card">カード1</div>
  <div class="card">カード2</div>
  <div class="card">カード3</div>
</div>

.card {
  padding: 20px;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  margin-bottom: 16px;
}

.card:last-child {
  margin-bottom: 0;
}

フォーム要素の間隔

<form class="contact-form">
  <div class="form-group">
    <label for="name">お名前</label>
    <input type="text" id="name">
  </div>
  <div class="form-group">
    <label for="email">メールアドレス</label>
    <input type="email" id="email">
  </div>
  <div class="form-group">
    <label for="message">メッセージ</label>
    <textarea id="message"></textarea>
  </div>
  <button type="submit">送信</button>
</form>

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 6px;
  font-weight: 500;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

単位の使い分け

ピクセル（px）

固定値で正確な余白を指定する場合に使用します。

.fixed-margin {
  margin-bottom: 24px;
}

em

フォントサイズに比例した余白を設定する場合に使用します。

.relative-margin {
  font-size: 16px;
  margin-bottom: 1.5em; /* 24px */
}

rem

一貫した余白を設定する場合に使用します（ルートのフォントサイズ基準）。

:root {
  font-size: 16px;
}

.consistent-margin {
  margin-bottom: 1.5rem; /* 常に24px */
}

パーセンテージ（%）

親要素の幅に対する相対値です（高さではないことに注意）。

.percentage-margin {
  margin-bottom: 5%; /* 親要素の幅の5% */
}

負のマージン

margin-bottomに負の値を設定すると、下の要素を上方向に引き寄せることができます。

.overlap-element {
  margin-bottom: -30px;
  position: relative;
  z-index: 1;
}

使用例：オーバーラップするカード

<div class="hero">
  <h1>ヒーローセクション</h1>
</div>
<div class="overlap-card">
  <p>ヒーローにオーバーラップするカード</p>
</div>

.hero {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 80px 20px 60px;
  color: #fff;
  text-align: center;
}

.overlap-card {
  max-width: 600px;
  margin: -40px auto 0;
  padding: 24px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

マージン相殺（Margin Collapsing）

隣接するブロック要素の上下マージンは「相殺」されて、大きい方の値のみが適用されます。

相殺の例

<div class="box1">Box 1</div>
<div class="box2">Box 2</div>

.box1 {
  margin-bottom: 30px;
}

.box2 {
  margin-top: 20px;
}

/* 間のマージンは50pxではなく30px（大きい方）になる */

相殺を防ぐ方法

/* 方法1: paddingやborderを追加 */
.parent {
  padding-top: 1px;
}

/* 方法2: overflow を visible 以外に */
.parent {
  overflow: hidden;
}

/* 方法3: display: flow-root を使用 */
.parent {
  display: flow-root;
}

/* 方法4: Flexbox または Grid を使用 */
.parent {
  display: flex;
  flex-direction: column;
}

レスポンシブデザインでの活用

メディアクエリでの調整

.section {
  margin-bottom: 40px;
}

@media (max-width: 768px) {
  .section {
    margin-bottom: 24px;
  }
}

@media (max-width: 480px) {
  .section {
    margin-bottom: 16px;
  }
}

clamp()を使った流動的な余白

.fluid-margin {
  margin-bottom: clamp(16px, 4vw, 48px);
}

コンテナクエリとの組み合わせ

.container {
  container-type: inline-size;
}

.card {
  margin-bottom: 16px;
}

@container (min-width: 400px) {
  .card {
    margin-bottom: 24px;
  }
}

実践的なデザインパターン

リズムのあるタイポグラフィ

/* 一貫したvertical rhythmを作成 */
:root {
  --baseline: 8px;
}

h1 {
  font-size: 32px;
  margin-bottom: calc(var(--baseline) * 4); /* 32px */
}

h2 {
  font-size: 24px;
  margin-bottom: calc(var(--baseline) * 3); /* 24px */
}

p {
  margin-bottom: calc(var(--baseline) * 2); /* 16px */
}

ユーティリティクラス

/* Tailwind CSS風のマージンユーティリティ */
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 4px; }
.mb-2 { margin-bottom: 8px; }
.mb-3 { margin-bottom: 12px; }
.mb-4 { margin-bottom: 16px; }
.mb-5 { margin-bottom: 20px; }
.mb-6 { margin-bottom: 24px; }
.mb-8 { margin-bottom: 32px; }
.mb-10 { margin-bottom: 40px; }
.mb-12 { margin-bottom: 48px; }
.mb-16 { margin-bottom: 64px; }

Lobotomized Owl（フクロウセレクタ）

すべての隣接要素に一括で余白を設定するテクニックです。

/* すべての要素（最初を除く）に上マージンを設定 */
.stack > * + * {
  margin-top: 16px;
}

/* または、すべての要素（最後を除く）に下マージンを設定 */
.stack > *:not(:last-child) {
  margin-bottom: 16px;
}

注意点

1. パーセンテージは親の幅基準

margin-bottom: 10%は親要素の幅の10%であり、高さではありません。

.parent {
  width: 400px;
  height: 200px;
}

.child {
  margin-bottom: 10%; /* 40px（親の幅400pxの10%） */
}

2. autoの動作

margin-bottom: autoは、通常のフローでは0と同じ動作をします。

/* 通常のブロック要素では効果なし */
.normal {
  margin-bottom: auto; /* 0pxと同じ */
}

/* Flexboxでは余白を埋める */
.flex-container {
  display: flex;
  flex-direction: column;
  height: 300px;
}

.flex-container .item {
  margin-bottom: auto; /* 下の余白をすべて使用 */
}

3. インライン要素には効果なし

margin-bottomはインライン要素には適用されません。

/* 効果なし */
span {
  margin-bottom: 20px;
}

/* 解決策: display を変更 */
span {
  display: inline-block;
  margin-bottom: 20px;
}

ブラウザサポート

ブラウザ	サポート状況
Chrome	全バージョン
Firefox	全バージョン
Safari	全バージョン
Edge	全バージョン
Opera	全バージョン
IE	全バージョン

margin-bottomはすべてのブラウザで完全にサポートされています。

まとめ

margin-bottomプロパティは、要素の下側に余白を設定するための基本的かつ重要なプロパティです。

主なポイント:

長さ（px, em, rem）、パーセンテージ、autoなどの値を指定可能
マージン相殺を理解し、必要に応じて対策を講じる
レスポンシブデザインではメディアクエリやclamp()を活用
負のマージンでオーバーラップデザインが可能
論理プロパティ（margin-block-end）への移行も検討

適切な余白設定により、読みやすく美しいレイアウトを実現しましょう。

概要