マージンとは？（マージン）意味・特徴をわかりやすく解説

Q: マージンとは？

CSS で要素の外側にとる余白。Web デザインの基本概念で、隣接要素間のスペースを制御する。Box Model の最外層、padding（内側）と対比される。

概要

マージン（Margin）は、CSS で要素の外側に取る余白を指す Web デザイン / フロントエンド開発の基本概念である。CSS Box Model の最外層に位置し、要素同士の間隔を制御する。隣接要素との垂直マージンが「相殺（collapse）」される独特な仕様（margin collapse）があり、初学者が混乱しやすいポイント。2026 年現在、CSS Logical Properties（margin-inline / margin-block）/ gap プロパティ（Flex/Grid）/ Tailwind CSS ユーティリティクラスが主流化、生 CSS の margin 直書きは減少傾向。

CSS Box Model（外から内へ）

[ Margin ]      ← 外側余白（透明）
  [ Border ]
    [ Padding ]   ← 内側余白
      [ Content ]

主要な margin 構文

/* 個別 */
margin-top: 16px;
margin-right: 24px;
margin-bottom: 16px;
margin-left: 24px;

/* 一括（時計回り）*/
margin: 16px 24px 16px 24px; /* T R B L */
margin: 16px 24px;            /* T/B R/L */
margin: 16px;                 /* 全方向 */

/* Logical Properties（2026 年標準）*/
margin-inline-start: 16px;    /* LTR で left */
margin-inline-end: 16px;      /* LTR で right */
margin-block-start: 16px;     /* top */
margin-block-end: 16px;       /* bottom */

/* 中央寄せ */
margin: 0 auto;
margin-inline: auto;

Tailwind CSS ユーティリティ

クラス	値
`m-0`	0px
`m-1`	0.25rem（4px）
`m-2`	0.5rem（8px）
`m-4`	1rem（16px）
`m-8`	2rem（32px）
`mx-4`	横方向 16px
`my-2`	縦方向 8px
`mt-4` / `mb-4`	top / bottom
`m-auto`	中央寄せ
`-m-4`	負のマージン -16px

Margin Collapse（垂直方向マージン相殺）

/* 隣接する 2 つの兄弟要素 */
.box1 { margin-bottom: 30px; }
.box2 { margin-top: 20px; }
/* 結果: 50px ではなく 30px（大きい方が採用）*/

起こる場面

隣接する兄弟要素の垂直マージン
親要素と最初 / 最後の子要素のマージン
空要素のマージン

防ぐ方法

padding を併用
border を追加
overflow: hidden / overflow: auto
display: flex / display: grid
gap プロパティ使用

gap プロパティ（2026 年推奨）

Flexbox / CSS Grid で gap を使うと margin collapse が発生せず、より直感的。

.container {
  display: flex;
  gap: 16px;  /* margin の代わり */
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;          /* row + column */
  row-gap: 24px;      /* 行のみ */
  column-gap: 16px;   /* 列のみ */
}

デザインシステムでの margin 命名

サイズ	用途
4px（xs）	関連要素間
8px（sm）	小コンポーネント内
16px（md）	標準
24px（lg）	セクション内
32px（xl）	セクション間
48px（2xl）	大セクション間
64px+（3xl）	ページレベル

Tailwind / Material Design / Apple HIG / Bootstrap が同様の階層を採用。

ビジネス文脈の「マージン」

用語	説明
営業利益マージン	売上 - 原価 - 経費
粗利益マージン	売上 - 原価
投資マージン	レバレッジ取引の証拠金
安全マージン	失敗回避の余裕

用語	違い
Padding	要素内側の余白
Border	要素境界の線
Gap	Flex/Grid 専用、collapse なし
Spacing	デザイン上の総称

よくある質問

Q1: margin と padding、どちらを使う？ A: 要素間の間隔は margin、要素内のテキスト等の余白は padding。背景色を持つコンポーネントは padding（背景延長）、独立コンポーネント間は margin が王道。

Q2: 中央寄せに margin: 0 auto か flex か？ A: 単純なブロック要素なら margin: 0 auto（width 必要）。複数要素や複雑配置は Flexbox（justify-content: center）が柔軟。2026 年は Flex / Grid 優先、margin auto は補完用。

Q3: 負のマージン（-margin）は使うべき？ A: 限定用途。要素の重ね表示 / 親要素の padding を相殺する場合に有効、過度な使用は混乱の原因。Tailwind の -mx-4 等は便利だが、Flexbox / Grid + gap で代替可能。

まとめ

CSS Box Model の 最外層余白、要素間隔を制御
2026 年は gap + Logical Properties + Tailwind ユーティリティ が主流
Margin Collapse に注意、新規は Flex / Grid + gap で回避

マージン（マージン）

概要