この記事の要点

margin はボックスの外側の余白を指定する CSS プロパティ ショートハンドで margin: 上 右 下 左; や margin: 縦 横; 形式で書ける margin: 0 auto; はブロック要素の中央寄せの定番イディオム 上下マージンは隣り合う要素間で相殺（margin collapsing）が発生する。横方向では起きない 負の値も指定でき、レイアウト微調整や要素の重ね合わせに使える

margin とは

margin は要素の外側に余白を作る CSS プロパティです。要素同士の距離を取ったり、ブロック要素を中央寄せしたりするのに使います。CSS ボックスモデルでは content → padding → border → margin の順に外側にあります。

4 辺の指定方法

プロパティ	意味
margin-top	上の余白
margin-right	右の余白
margin-bottom	下の余白
margin-left	左の余白
margin	4 辺をまとめて指定するショートハンド

ショートハンドの書き方

/* 4 辺すべて 10px */
.box { margin: 10px; }

/* 縦 10px / 横 20px */
.box { margin: 10px 20px; }

/* 上 / 横 / 下 */
.box { margin: 10px 20px 30px; }

/* 上 / 右 / 下 / 左（時計回り） */
.box { margin: 10px 20px 30px 40px; }

使える単位

単位	説明
px	絶対的なピクセル
em / rem	フォントサイズ基準（タイポグラフィに合わせやすい）
%	親要素の幅に対する比率（上下の % も幅基準）
auto	ブラウザが自動計算。中央寄せに使う
vh / vw	ビューポート基準
負の値（例 -10px）	要素を引き寄せたり重ねたりする

中央寄せの定番: margin: 0 auto

幅が決まったブロック要素を水平方向中央に置く最も基本的なやり方です。

.container {
  width: 1000px;
  margin: 0 auto;       /* 上下 0、左右 auto */
}

/* レスポンシブ対応版 */
.container {
  max-width: 1000px;
  margin-inline: auto;  /* 論理プロパティで左右 auto */
  padding: 0 16px;      /* 画面端の余白 */
}

注意点として auto はブロック要素にしか効きません。インライン要素やテーブルは別の方法（text-align: center や Flex / Grid）が必要です。

マージン相殺（margin collapsing）

上下に並んだブロック要素の margin-bottom と margin-top は、大きい方の値だけが残って合算されません。これを「マージンの相殺」と呼びます。

<style>
  .a { margin-bottom: 30px; }
  .b { margin-top: 20px; }
</style>

<div class="a">A</div>
<div class="b">B</div>
<!-- A と B の間隔は 50px ではなく 30px -->

相殺は上下方向にしか起きず、左右では発生しません。Flex / Grid コンテナの子要素や、overflow / display: flow-root を指定したコンテナの中でも発生しません。

負の margin で要素を重ねる

/* カードを上に少し被せる */
.next-card {
  margin-top: -20px;
}

/* 親の padding を打ち消して画面端まで広げる */
.bleed {
  margin-inline: -16px;
}

負の margin は柔軟ですが、レイアウトの可読性が下がるため使いどころは絞ったほうが安全です。

論理プロパティ（margin-inline / margin-block）

多言語サイトや縦書きで方向に依存しないレイアウトを書くために、論理プロパティが用意されています。

論理プロパティ	横書き LTR での意味
margin-inline-start	margin-left に相当
margin-inline-end	margin-right に相当
margin-block-start	margin-top に相当
margin-block-end	margin-bottom に相当
margin-inline	左右まとめて
margin-block	上下まとめて

margin と padding の違い

項目	margin	padding
位置	border の外側	border の内側
背景色 / 背景画像	反映されない	反映される
負の値	使える	使えない
相殺	上下で発生する	発生しない
幅・高さへの算入	影響しない	box-sizing による

よくあるトラブル

症状	対処
margin-top が親要素の外側に突き抜ける	マージン相殺が親まで波及している。親に padding-top: 0.1px / border / overflow: hidden / display: flow-root のいずれかを当てる
margin: auto で中央に寄らない	要素が block ではない / 幅が指定されていない / Flex/Grid 子で別ルールが効いている
% 指定の上下マージンが想定と違う	上下も親要素の幅基準で計算される仕様
Flex で margin-bottom が効きにくい	Flex では相殺が起きないので、本当に効いていないのは gap や flex-grow の影響を疑う

関連

• ボックス関連プロパティ — 親カテゴリ
• CSS — 上位カテゴリ