【HTML・CSS】WEBページの要素に余白を設ける（padding・margin）

74

Views

HTMLではdivタグで囲まれたブロックや、aリンクで作成したボタンといった要素に対して、CSSでpaddingやmarginを指定することで”余白”を設けることができます。

 

この記事では初心者向けに

 

  • paddingとは何か？
  • marginとは何か？
  • padding、marginの使い方

について解説をしていきます。 HTMLを学び始めた方でも分かりやすいように、やさしく解説をしますのでぜひ参考にしてみてください！

 

paddingについて解説

paddingを指定すると、要素の内側に余白を設けることができます。「要素の内側」という表現がイメージ付きづらいと思うため、以下の具体例を見てみて下さい。

paddingを用いた具体例

(1)最初に、以下の様なdivタグで囲まれたaリンクを3つ用意します。
HTML
<div class="btn1_area">
  <a href="#" class="btn1">これはボタン1です</a>
</div>
<div class="btn2_area">
  <a href="#" class="btn2">これはボタン2です</a>
</div>
<div class="btn3_area">
  <a href="#" class="btn3">これはボタン3です</a>
</div>
CSS
a.btn1{
  display:inline-block;
}
a.btn2{
  display:inline-block;
}
a.btn3{
  display:inline-block;
}
(2)WEBページでは以下の様に表示されます（出力イメージ）
(3)aリンクのbtn1クラスに対してpaddingを指定します
CSS
a.btn1{
  display:inline-block;
  padding:10px 30px 10px 30px;/*上に10px、右に30px、下に10px、左に30pxの余白を設定する*/
}
a.btn2{
  display:inline-block;
}
a.btn3{
  display:inline-block;
}
(4)WEBページでは以下の様にpaddingが反映されます（出力イメージ）

つまりaリンクの例で言うと、paddingを指定することでボタンの内側の上下左右に余白を設けることが出来ます。

marginについて解説

marginを指定すると、要素の外側に余白を設けることができます。「要素の外側」という表現についても分かりづらいと思うため、まずは先の例と同様に具体例を見て下さい。

marginを用いた具体例

(1)前提として、以下の様にdivタグで囲まれたaリンクを3つ用意します。
HTML
<div class="btn1_area">
  <a href="#" class="btn1">これはボタン1です</a>
</div>
<div class="btn2_area">
  <a href="#" class="btn2">これはボタン2です</a>
</div>
<div class="btn3_area">
  <a href="#" class="btn3">これはボタン3です</a>
</div>
CSS
a.btn1{
  display:inline-block;
}
a.btn2{
  display:inline-block;
}
a.btn3{
  display:inline-block;
}
(2)WEBページでは以下の様に表示されます（出力イメージ）
(3)aリンクのbtn2クラスに対してmarginを指定します
CSS
a.btn1{
  display:inline-block;
}
a.btn2{
  display:inline-block;
  margin:10px 30px 50px 30px;/*上に10px、右に30px、下に50px、左に30pxの余白を設定する*/
}
a.btn3{
  display:inline-block;
}
(4)WEBページでは以下の様にmarginが反映されます（出力イメージ）

つまりmarginを指定すると、ボタンの外側の上下左右に余白を設けることが出来ます。これはmarginおよびpadding共に、divタグなどの他の要素にも同様の効果があります。

 

以上となります。