余白を空けるmarginとpaddingの特徴とそれぞれの違い

CSSのmarginとpaddingはどちらも余白を空けるためのプロパティですが、特徴を理解していないとレイアウトに時間がかかってしまいます。

marginとpaddingは非常に重要なプロパティとなっていますので、それぞれの違いを理解してスムーズにコーディングできるようにしておきましょうー！

CONTENTS

WordPressの表示速度No1！
初心者からからプロフェッショナルまで使えるロリポップサーバーは月額550円から！

デベロッパーツールを使ってみると分かりやすい

Google ChromeやBraveであれば、ウェブサイトを開いて目的の要素の上で右クリック → 検証をクリックすることで、目的の場所にどんなプロパティがどのように使われているかを見ることができます。

当ブログをデベロッパーツールで見てみると、このようになっているのが分かります。

要素を選択したときに色が付いていて、ブルーは要素自体の領域、オレンジはmargin、グリーンはpaddingとなっています。
パープルもありますが、それはgapというフレックスボックス専用の余白のプロパティを表しています。

では、それぞれにどのような特徴があるのかを見てみましょう。

サンプルとなる基本のコードは下記の通りです。

HTMLはこんな感じ。

<section>
  <div class="blue">BLUE</div>
  <div class="pink">PINK</div>
</section>

CSSはこんな感じです。

.blue {
  outline: 2px solid #0099ff;
}

.pink {
  outline: 2px solid #ff0099;
}

section要素の中に2つのdivがあるシンプルなものです。

marginは要素の外側に余白を空けるプロパティです。

marginだけを適用したコードはこちら。

.blue {
  outline: 2px solid #0099ff;
  margin: 0 0 2rem 0; // 上 右 下 左
}

.pink {
  outline: 2px solid #ff0099;
}

.blueにmarginを指定して、下方向にだけ2remの余白を付けてみました。

デベロッパーツールで見てみると、.blueの外側下方向だけに余白ができています。

divやpなどブロックレベル要素に対しては上下左右の4方向を指定することができますが、spanやaなどのインライン要素には上下方向は指定できず、左右方向のみにしか使えません。

また、下記のようにマイナスの値を指定して、ネガティブマージンを使ったレイアウトをすることができます。

margin: -1rem 0 0 0;

paddingは要素の内側に余白を空けるプロパティです。

paddingだけを適用したコードはこちら。

.blue {
  outline: 2px solid #0099ff;
  padding: 0 0 2rem 0; // 上 右 下 左
}

.pink {
  outline: 2px solid #ff0099;
}

.blueにpaddingを指定して、下方向にだけ2remの余白を付けてみました。

デベロッパーツールで見てみると、.blueの内側下方向だけに余白ができています。

paddingはmarginと似ていますが、いくつか動作が異なります。

paddingはspanやaといったインライン要素にも上下の余白が指定できますが、marginのようにマイナスの値は指定できません。

marginやpaddingはレイアウトをするには必須です。レイアウトをするときには基本的にpaddingは親要素に、marginは子要素に指定するとスムーズに使い分けができると思います。

<section> <!--  親要素 -->
  <div class="blue">BLUE</div> <!-- 子要素 -->
  <div class="pink">PINK</div> <!-- 子要素 -->
</section>

sectionはdivを包括している親要素ですので内側へのpaddingを指定して、その中にあるdivは子要素となるのでmarginを使います。

また、親要素のボックスを中央に配置するには、親要素の大きさをwidthで指定して、margin:auto;で左右の余白を自動計算することで平均的な場所(中央)にsectionを配することができます。

section {
  width: 40rem; // 大きさを指定
  padding: 4rem 0; // 上下に4remの内側への余白
  margin: auto; // 全方向の余白を自動で計算
}

デベロッパーツールで確認するとこのようになります。

marginやpaddingは小さなコンポーネントから大きなレイアウトまで幅広く使われるプロパティです。動作を覚えるまでが大変ですが、ウェブサイトの模写などをひたすら行って、どういう場面でどうやって使うべきかを身につけていきましょう。