CSSのmarginとpaddingの違いを徹底解説｜初心者向け実例付きガイド

はじめに

CSS のレイアウトで頻出する 「margin」 と 「padding」 は、用途が似ているため初心者が混同しやすいポイントです。

しかし、それぞれの役割を正しく理解することで、ページの余白調整やデザインの自由度が大きく向上します。

本記事では、基本概念から具体的な使用例、よくある誤解までを丁寧に解説し、図解や実践コードを交えて初心者でも正しく使い分けられるようにまとめています。

基本理解

CSS で margin や padding の役割を理解する前に、まずボックスモデルの仕組みを押さえておくと、各余白の意味がわかりやすくなります。

ボックスモデルの基礎

ボックスモデルとは、CSS で要素の幅・高さ・余白・境界線を管理する基本的な考え方です。

すべての要素はこのボックスモデルに沿って描画され、正しく理解することでレイアウトの調整やデザイン崩れを防ぐことができます。

ボックスモデルの構造（内側から外側の順）

• content（コンテンツ本体）

実際に表示されるテキストや画像の領域

• padding（内側余白）

コンテンツとボーダーの間のスペース

• border（境界線）

要素の枠線

• margin（外側余白）

要素と他の要素との間のスペース

ボックスモデルを理解することで、margin と padding の違いを正しく使い分けられ、width や height を設定した際の計算も正確に行えるため、レイアウト設計が格段に安定します。

margin とは

margin は、要素の外側の余白を指します。

周囲の要素との間隔を調整することで、レイアウトを整える役割があります。

例えば、要素同士がくっつきすぎないよう距離を確保する場合に使います。

このように、margin を適切に設定することで、ページ全体のバランスが整い、見た目がスッキリします。

padding とは

padding は、要素の内側の余白を指し、コンテンツとボーダーの間のスペースを確保します。

文字や画像などを見やすく表示するために使われ、デザインの安定性にも関わります。

padding を適切に使うことで、テキストや画像が窮屈にならず、読みやすいデザインになります。

margin と padding の違いを詳しく解説

見た目では分かりにくい違い

見た目では同じ大きさの余白でも、margin は外側の間隔、padding は内側の間隔に影響します。

例えば背景色がある場合、padding は背景色が適用されますが、margin は背景色が適用されません。

上下左右の指定方法

CSS では、margin/padding は上下左右別々に指定可能です。

margin 例

 {
  margin-top: 10px;
  margin-right: 5px;
  margin-bottom: 10px;
  margin-left: 5px;
}

padding 例

 {
  padding-top: 10px;
  padding-right: 5px;
  padding-bottom: 10px;
  padding-left: 5px;
}

上下左右の余白は 1 行でまとめて指定することも可能です。

コード量を削減でき、可読性や保守性が向上するため、積極的に使っていきましょう。

margin 例

 {
  margin: 10px 5px 10px 5px; /* 上右下左 */
  margin: 10px 5px; /* 上下, 左右 */
}

padding 例

 {
  padding: 10px 5px 10px 5px; /* 上右下左 */
  padding: 10px 5px; /* 上下, 左右 */
}

値は4 つ並べると上右下左をそれぞれ指定することができ、2 つ並べると上下と左右をそれぞれまとめて指定することができます。

実務で使える margin・padding 活用例

画面サイズに合わせた余白調整

画面サイズに応じた余白調整は、レスポンシブデザインで非常に重要です。

固定値(px)だけで余白を指定すると、スマホやタブレットなど画面幅が異なる端末で表示が崩れる可能性があります。

そこで、%やvw、em/remなどの相対単位を活用することで、画面サイズに応じて柔軟に余白を変えることができます。

以下は、コンテナとグリッドアイテムの余白をレスポンシブに調整する例です。

<div class="container">
  <div class="grid-item">アイテム 1</div>
  <div class="grid-item">アイテム 2</div>
  <div class="grid-item">アイテム 3</div>
</div>

.container {
  padding: 2%; /* コンテナ全体の内側余白 */
}

.grid-item {
  margin-bottom: 1.5rem; /* 要素間の下マージン */
  background-color: #74e5c5;
  text-align: center;
  padding: 10px;
}

この例では、画面幅が小さくなるとコンテナの padding を広く取り、各アイテムの下マージンを少し狭めます。

こうすることで、スマホ表示でも余白が適切に保たれるようにしています。このような工夫により、どのデバイスでも見やすいレイアウトを実現できます。

よくある誤解とレイアウト崩れの原因

親子要素で起こる誤作動

親要素と子要素の両方に margin がある場合、意図しない間隔が生じることがあります。これをmargin の相殺と言います。

margin の相殺とは

上下に隣接する要素の margin は、足し算されず、大きい方の値だけが適用されます。

たとえば、親要素に margin-top: 20px、子要素に margin-top: 10px が設定されている場合、実際にブラウザ上で適用されるのは 20px だけです。

この仕組みによって、思ったより余白が狭く見えたり、レイアウトが崩れたりすることがあります。

よくあるレイアウト崩れの事例

Web デザインやコーディングでよく起こるのが、意図しない余白や間隔によるレイアウト崩れです。

特に初心者がつまずきやすいポイントを整理すると、以下のようなケースがあります。

• 子要素の margin が親要素の外に影響

子要素に設定した margin が親要素の外側に反映され、想定より余白が広がることがあります。

• レスポンシブ時に余白が広がりすぎる

画面サイズが変化すると、相対単位（%や em/rem）で設定した余白が想定より大きくなる場合があります。

• インライン要素に margin-top / bottom が効かない

インライン要素は上下の余白が無視されるため、意図通りのスペースが作れないことがあります。

初心者が覚えるべきポイント

単位（px % em rem）の使い分け

余白を適切に設計するためには、単位の使い分けと全体のバランスが重要です。
まずは基本的な単位の理解から始めましょう。

単位	説明
px	固定値で正確に指定する。微調整やピクセル単位での調整に便利です。
%	親要素に対する相対値。親要素の幅に応じて変化します。
em/rem	文字サイズに応じたスケーリング。テキスト中心のデザインやレスポンシブに有効です。
vw	ビューポート（画面幅）に対する相対値。画面サイズに応じて余白やサイズを動的に変えたい場合に有効です。

可読性を高める余白設計

適切な margin/padding を使うことで、視認性が向上し、読みやすいデザインになります。
無理に余白を詰めすぎず、情報の見やすさと視線の誘導を意識した設計が大切です。

このように 余白を戦略的に使うことで、読みやすく操作しやすいページ が作れます。

まとめ

margin と padding の役割の違いを理解し、適切に使い分けることで、レイアウトの安定性と可読性が向上します。

本記事で紹介した基本概念、指定方法、実務例を押さえれば、初心者でも適切なコーディングができるようになります。

こうした、HTML/CSS の基礎を始めとする Web 制作を学びたい方には、WEBMASTERS がおすすめです。
現役エンジニアのマンツーマン指導により、独学だけでは気づきにくいポイントも効率よく習得できます。

基礎から段階的に学び、コーディングスキルを着実に身につけていきましょう。