HTML/CSS基礎 2025.10.15

【ボックスモデル完全理解】margin・padding・borderの正しい使い分け

コンテンツ 非表示

1 第1章：ボックスモデルの4層

2 第2章：使い分けの原則

3 第3章：コード例で確認

4 第4章：マージン相殺（collapse）対策

5 第5章：余白トークン設計（Sass変数）

6 まとめ

第1章：ボックスモデルの4層

全ての要素は「content / padding / border / margin」の4層で構成されています。
内側の余白はpadding、外側の余白はmarginです。


/* 図解イメージ（コメント）:
[ margin ]
 └─ [ border ]
     └─ [ padding ]
         └─ [ content ] */

第2章：使い分けの原則

原則： 内側の見栄え調整＝padding、要素間距離＝margin、均一なすき間＝gap。


.button { padding:10px 16px; }      /* ボタンの内側 */
.section + .section { margin-top:40px; } /* セクション間 */
.list { display:flex; gap:12px; }   /* 並びの隙間 */

第3章：コード例で確認


<div class="box">Box Sample</div>


.box{
  background:#e9f4fb; color:#1f3a56;
  padding:20px; border:4px solid #4a8fd8;
  margin:40px; text-align:center; font-weight:600;
}

第4章：マージン相殺（collapse）対策

上下marginが重なって「効かない」ように見える現象。親に吸収されるのが原因です。


.parent { background:#a7d1f0; }
.child { margin-top:40px; background:#fff; }

/* 対策 */
.parent{ padding-top:1px; } 
/* もしくは */ 
.parent{ overflow:hidden; } 
/* または */ 
.parent{ display:flow-root; }

第5章：余白トークン設計（Sass変数）


$space-xs: 8px; 
$space-sm: 16px; 
$space-md: 24px; 
$space-lg: 40px; 
$space-xl: 64px;

/* 例： */ 
.card + .card { 
margin-top: $space-lg; 
}

「余白の一貫性」が整ったUIの近道。迷ったら24px基準から。

まとめ

padding＝内側／margin＝外側／gap＝並びの隙間
マージン相殺はflow-root等で回避
トークン化で全体の統一感アップ

Blog