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

2022.09.20
htmlで余白を取るには?

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

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

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

  • 余白を取るには?
  • paddingとmarginについて

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

この記事を読めば、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で余白を作りたいときに、今回の記事が参考になれば幸いです。

関連記事

資料請求

  • 短期集中で最速エンジニア転職を実現-転職成功者インタビュー一覧

    DMM WEBCAMPでは転職成功率98%を実現しています。本資料では、元警察官や元ラーメン屋など様々なバックグラウンドを持つ卒業生の声をお届けします。

    資料をダウンロードする
  • IT技術がもたらす3つの変化と身につけるべきスキル

    IT技術の発展により、今後10~20年程度で47%の仕事がなくなると言われています。どのような変化が訪れ、私達はどのようなスキルを身につけるべきかを解説します。

    資料をダウンロードする
  • 未経験がフリーランスエンジニアになる方法-年収アップで自由な働き方を手に入れる

    働き方改革やリモートワークの影響でフリーランスという働き方の人気は高まりつつあります。フリーランスエンジニアとして活躍するために必要な情報をお届けします。

    資料をダウンロードする

© 2022 WEBCAMP MEDIA Powered by AFFINGER5