Margin プロパティ

最終更新：2026-09-13

margin Margin プロパティ

margin プロパティは要素の周囲の外部スペース、つまりその境界線と隣接する要素との距離を設定します。これはボックスモデルの中で最も広く使われるプロパティの一つで、要素間の間隔の制御、要素の水平方向の中央揃え、余白の追加に役立ちます。margin は固定長さ、パーセンテージ、あるいはブラウザーが計算する auto を取ることができます。

カテゴリ
初期値	0
継承	いいえ
適用対象	all
アニメーションタイプ	length
CSS バージョン	CSS1
状態	標準

📝 構文

margin: <length> | <percentage> | auto;

⚙️ 値

値	タイプ	説明
`auto`	キーワード	ブラウザーが外余白を自動的に計算します。
`<length>`	タイプ	固定された margin 値。
`<percentage>`	タイプ	包含ブロックの幅に対するパーセンテージ。

▶ 例

以下のコードを編集して、プレイグラウンドでライブ結果を確認してください：

▶ 試す

🌐 ブラウザーサポート

ブラウザー	Chrome	Edge	Firefox	Safari	Opera
margin	✓ v1	✓ v12	✓ v1	✓ v1	✓ v1
すべての主要ブラウザーでサポート

注意： 隣接する垂直方向の margin は「margin の相殺（margin collapse）」が起き、実際の間隔は両値の和ではなく大きい方の値になります。

ヒント： margin:0 auto; はブロックレベル要素を親の中で水平方向に中央揃えします（明確な幅が必要）。

❓ よくある質問

Qmargin と padding の違いは何ですか？

Amargin は境界線の外側のスペースで、隣接要素やコンテナの端からの距離を制御し、負の値が許されます。padding はコンテンツと境界線の間のスペースで、コンテンツの箱の端からの距離を制御し、負の値にはできません。padding は背景やクリック領域も広げますが margin は広げず、相殺されるのは垂直方向の margin だけです。迷ったら、レイアウトの隙間には margin を、内側の余白には padding を使ってください。

Qなぜ margin:auto は水平方向にしか中央揃えできず、垂直方向にはできないのですか？

Aブロックレベル要素は左右の余った水平 margin のスペースを自動的に分割するため中央揃えになります。通常フローには垂直軸に相当する仕組みがありません。垂直方向に中央揃えするには、親を display:flex; align-items:center; justify-content:center の flex コンテナにするか、display:grid; place-items:center の grid コンテナにします。grid では、auto margin が両軸の空きスペースを吸収するため、アイテム自身に margin:auto を使うこともできます。

Qmargin の相殺（margin collapse）とは何ですか？

A垂直方向では、隣接する要素の上下の margin は足し合わさず、間隔は両値の大きい方になります。これが margin の相殺です。子の margin-top が親から抜け出して親自体を下に押し下げることもあります。防ぐには、親に padding や border を追加する、overflow:hidden を設定する、あるいは flex や grid を使う方法があります。水平方向の margin は相殺されないため、これが影響するのは垂直方向の間隔だけです。

Qmargin のパーセンテージは何に対するものですか？

Amargin は常に包含ブロックの幅（inline size）に対して解決され、margin-top や margin-bottom も高さではなく幅から計算されます。例えば親が 400px 幅の場合、margin-top:10% は 40px になります。これは CSS の意図的な規則で、しばしば人を驚かせます。パーセンテージの margin、特にレスポンシブレイアウトの垂直方向の間隔を使う際は心に留めておく価値があります。