【CSS学習】CSSのmarginとは？使い方・注意点・paddingとの違いを完全解説！

はじめに

Web制作をしているとよく登場する「margin」。
見た目を整えるうえで欠かせないプロパティですが、paddingとの違いや上下のマージンが重なってしまうマージンの相殺など、初心者がつまずきやすいポイントも多いです。

この記事では、CSSのmarginの基本から応用、よくある注意点までをわかりやすく解説します。
これを読めば「marginを自由自在に使いこなす」ことができるようになります。

margin（マージン）は、要素の外側の余白を指定するCSSプロパティです。
つまり「他の要素との距離」を調整するために使います。

See the Pen Untitled by suguru (@suguru22) on CodePen.

上記の例では、ボックスの外側に75pxの余白ができます。
この余白によって、ほかの要素やブラウザの端との距離が確保されます。

marginは4方向に分けて指定できます。

4つのmarginをまとめて指定することもできます。

margin: 10px 20px 30px 40px;
/* 上 右 下 左 の順番 */

また、指定する数が少ない場合は以下のように省略も可能です。

よく使われる単位は以下の通りです。

たとえば以下のように書くと、親の幅に応じて動的に余白が変化します。

.box {
  margin: 5%;
}

ブロック要素を横方向に中央寄せするには、margin: 0 auto;を使います。

.box {
  width: 200px;
  margin: 0 auto;
}

親要素にtext-alignを使わずに中央配置できる便利な方法です。
※ただし、widthを指定していないと中央寄せはできません。

.box {
  background-color: lightblue;
  margin: 20px;
  padding: 20px;
}

この場合、paddingは背景色の中に余白を作り、marginは外側に余白を作ります。
見た目を整えるときは、どちらで余白を取るのかを意識することが大切です。

2つの縦方向のmarginが重なった場合、大きい方のmarginだけが適用されます。
これを「marginの相殺（マージンの重なり）」と呼びます。

See the Pen Untitled by suguru (@suguru22) on CodePen.

この場合、上下のmarginが50px + 30px = 80pxにはならず、50pxだけが反映されます。

親要素の中の最初の子要素にmargin-topを指定すると、親ごとずれてしまうことがあります。
これは「marginの相殺」が原因です。

などで相殺を防げます。

marginは、CSSレイアウトの中でも最も基本的でありながら、理解が深まるほど奥が深いプロパティです。
「外側の余白」「autoで中央寄せ」「上下の相殺」など、今回紹介したポイントを押さえることで、
より美しく整ったWebデザインを作ることができます。