HTMLで余白を取るには？paddingとmarginの違いを解説

HTMLでコンテンツの周囲に余白を取りたいときがあると思います。

コンテンツがぎちぎちに詰まったページよりも、適度に余白を取ったレイアウトの方が閲覧しやすいですよね。

今回は、HTML内のコンテンツに余白を取りたいという方のために、

以上の項目に沿って、解説していきますね。

この記事を読めば、HTML内のコンテンツに余白を取る適切な方法が分かるようになりますよ。

ぜひ最後まで読んでくださいね！

HTMLで余白を取る方法とは？

HTML内のコンテンツに余白を取る方法は2つあります。

要素の内側に余白を取る方法と、外側に余白を取る方法です。

それぞれ、CSSのpaddingプロパティとmarginプロパティを使用します。

ここでは、2つのプロパティの特徴と使い方を解説しましょう。

paddingプロパティについて

paddingは、要素の内側の余白を指定するときに使います。

以下の要素の内側に余白を付けてみますね。

<div class="sample">要素の内側に余白が生まれます</div>

CSSでpaddingを指定します。

.sample {
  padding: 20px;
  background: skyblue;
}

分かりやすいように背景色を指定しています。

本来であれば、要素のサイズは、文字にぴったりとつく大きさになりますが、余白を取ることで上下左右に範囲が広がります。

paddingプロパティを使った様々な指定方法

paddingのみだと上下左右の指定になりますが、以下のように一部だけの余白指定もできます。

padding-top: 20px;  /* 上のみ余白あり */
padding-left: 20px;  /* 左のみ余白あり */
padding-right: 20px;  /* 右のみ余白あり */
padding-bottom: 20px;  /* 下のみ余白あり */

これら4方向の指定は、以下のようにpaddingでまとめて指定可能です。

padding: 20px;  /* 上下左右の余白 */
padding: 10px 15px;  /* [上下]、[左右]の余白 */
padding: 10px 15px 10px;  /* [上]、[左右]、[下]の余白 */
padding: 10px 15px 5px 0px;  /* [上]、[右]、[下]、[左]の余白 */

単位について

paddingの値の単位は、px以外にもremや%などの指定が可能です。

%で指定する際には、width, heightなどの要素自体のサイズと、外側の余白のmarginを合わせて100%以下にする必要があります。

marginプロパティについて

marginは、要素の外側の余白を指定するときに使います。

以下の要素の外側に余白を付けてみます。

<div class="wrap">
  <div class="content">この要素の外側に余白が生まれます</div>
</div>

CSSでmarginを指定します。

.wrap{
  background: #ccc;
}
.content{
  width: 200px;
  height: 200px;
  margin: 30px;
  background: skyblue;
}

要素を入れ子にして、中の要素の外側に余白を指定しています。

両方の要素に背景色を指定しました。余白ができていることを確認できたでしょうか？

中の要素にpaddingを指定すれば、内側と外側に余白ができますよ。

marginプロパティを使った様々な指定方法

padding同様に、marginでも上下左右一部だけの指定が可能です。

margin-top: 20px;  /* 上のみ余白あり */
margin-left: 20px;  /* 左のみ余白あり */
margin-right: 20px;  /* 右のみ余白あり */
margin-bottom: 20px;  /* 下のみ余白あり */

また、上下左右の指定をまとめて指定する方法も同様に使えます。

margin: 20px;  /* 上下左右の余白 */
margin: 10px 15px  /* [上下]、[左右]の余白 */
margin: 10px 15px 10px;  /* [上]、[左右]、[下]の余白 */
margin: 10px 15px 5px 0px;  /* [上]、[右]、[下]、[左]の余白 */

marginプロパティを使うときの注意点

marginは外側の余白を指定できますが、縦方向（上下）の指定をする際には注意が必要です。

2つの要素が縦に並び、その両方に縦方向の余白が指定されていた場合、marginは相殺され、大きい方の値だけ余白が生まれます。

<div class="sample01">上の要素</div>
<div class="sample02">下の要素</div>

CSSで別の値のmarginを指定します。

.sample01, .sample02{
  width: 200px;
  height: 200px;
}
.sample01 {
  margin: 10px;
  background: orange;
}
.sample02 {
  margin: 30px;
  background: green;
}

上記では、2つの要素の間の余白は、大きい方の30px分の余白ができます。

このmarginの相殺は縦方向にのみ起こり、横方向には生じません。

横並びに要素がある場合には、両方のmarginを足し合わせた分の余白ができます。

この違いは覚えておいた方が良いですね。

まとめ：paddingとmarginをマスターしよう

今回は、HTML内のコンテンツに余白を取る方法を解説してきました。

要素の内側の余白と外側の余白で異なるプロパティ、paddingとmarginを使うということでしたね。

それぞれのコードと使い方を紹介しました。

HTMLで余白を作りたいときに、今回の記事が参考になれば幸いです。