👋

UIが崩れる？paddingとmarginの正しい使い分け【CSSレイアウト基礎】

に公開
CSS
CSS 3
UI
margin
padding
tech

はじめに

私が実際にbootstrapのdatepickerでUI崩れに悩んだ際に調査した内容になります。

padding と margin はどちらも CSS の「余白」を扱うプロパティですが、役割も影響範囲もまったく違うんです。以下で詳しく整理してみましょう👇

🧱 基本構造：ボックスモデル

CSS のボックスモデルは以下のような構造になっています：

+-----------------------------+
|         margin              |
|  +-----------------------+  |
|  |      border           |  |
|  |  +-----------------+  |  |
|  |  |    padding      |  |  |
|  |  |  +-----------+  |  |  |
|  |  |  | content   |  |  |  |
|  |  |  +-----------+  |  |  |
|  |  +-----------------+  |  |
|  +-----------------------+  |
+-----------------------------+

🔍 padding と margin の違い

特性 padding margin
位置 内側の余白 外側の余白
影響する範囲 要素の内部とボーダーの間 要素の外部と他の要素との間
背景色の影響 背景色は padding にも適用される 背景色は margin には適用されない
レイアウトへの影響 子要素の位置やサイズに影響する 隣接する要素との距離に影響する
collapse（重なり） padding は collapse しない margin は上下で collapse することがある

🎯 実例で比較

1. padding-bottom: 70px; 

<header style="padding-bottom: 70px; background: lightblue;">
  <p>中身のテキスト</p>
</header>
  • p 要素は下に70px押し下げられる
  • 背景色は padding 部分にも表示される
  • 絶対位置の要素（Datepickerなど）はこの padding によってズレる可能性あり

2. margin-bottom: 70px; 

<header style="margin-bottom: 70px; background: lightblue;">
  <p>中身のテキスト</p>
</header>
  • header の下に70pxの余白ができる
  • 背景色は margin 部分には表示されない
  • 子要素の位置には影響しない（Datepickerの位置も安定）

🧠 使い分けのコツ

目的 使うべきプロパティ
要素の中に余白を作りたい padding
要素と他の要素の間に余白を作りたい margin
背景色を余白にも適用したい padding
レイアウトのズレを防ぎたい margin（特に絶対位置要素が絡む場合）

Discussion