要素下部にパディング(内部余白)を指定する

CSS - padding-bottom

概要

CSSプロパティ「padding-bottom」は、要素下部にパディング(余白)を指定することができます。このパディング領域についてですが、これは要素の内側下部に対して行われます。対して外側の下部に余白をつけたい場合は margin-bottom プロパティを利用します。

<div class="padding-bottom">
  <p>色のついている部分が余白です。下部に指定した20pxの余白があります。</p>
</div>
<style>
* {
  padding: 0;
  margin: 0;
}
div {
  background-color: #def;
  border: 1px solid #000;
}
p {
  background-color: #fff;
}
.padding-bottom {
  padding-bottom: 20px;
}
</style>

また四方のパディングを指定したい場合は padding プロパティを使用するとよいでしょう。

取りうる値

単位説明
pxpxとは画面の1画素(ピクセル)のサイズを1とする単位です。実際に表示されるサイズはモニターの解像度により変化します。
em親要素を起点とする文字の高さを1とする単位です。1emは1文字分となります。
%親要素の幅を基準に割合を%値で指定した単位です。

使用例

このプロパティを使用して、テキストの下に画像があるデザインを実装してみましょう。

<div>
  <p class="padding-bottom">このテキストの下に20pxの余白を設けます</p>
  <img src="https://www-creators.com/wp-content/uploads/2017/10/sample.jpg" alt="サンプル画像" width="160" height="120">  
</div>
<style>
* {
  margin: 0;
  padding: 0;
 }
div {
  text-align: center;
}
.padding-bottom {
  padding-bottom: 20px;
}
</style>

仕様書

関連CSSプロパティ