CSS padding 要素の内側の余白を指定する

CSSのpaddingのサンプルです。

目次 paddingとは
数値+pxを指定 / 数値+%を指定
paddingを個別に指定

paddingとは

書き方 padding : 値  → 上下左右を指定
padding : 値 値  → 上下と左右を指定
padding : 値 値 値  → 上と左右と下を指定
padding : 値 値 値 値 → 上と右と下と左を指定 (時計回りです)
値は半角スペースで区切ります。
数値 + 単位  
指定した単位で設定します。 
数値+pxを指定
数値 + %
親ブロックのwidthに対する割合で設定します。
数値+%を指定
備考
パディング(padding)は、コンテンツエリアとボーダーの間の余白です。
ボーター(border)は、要素の周りにある線で、マージン(margin)は隣の要素と距離を取るために使用します。
初期値 0
継承 なし
参考(MDN) https://developer.mozilla.org/ja/docs/Web/CSS/padding

数値+pxを指定

<style>
  .c1 {
    width: 200px;
    border: 1px solid #000;
  }
  .c2 {
    padding: 20px 20px 20px 20px; /*padding: 20px;と同じ*/
  }
</style>
<div class="c1">
  <div class="c2">テスト</div>
</div>

7行目は、paddingに20pxを指定しています。半角スペース区切りです。

以下のイメージになります。
paddingが20pxがあります。

 

数値+%を指定

<style>
  .c1 {
    width: 200px;
    border: 1px solid #000;
  }
  .c2 {
    padding: 10% 10% 10% 10%; /*padding: 10%;と同じ*/
  }
</style>
<div class="c1">
  <div class="c2">テスト</div>
</div>

7行目は、paddingに10%を指定しています。半角スペース区切りです。
親のwidthに対する割合になります。heightではありません。
親は、3行目でwidthを200pxで指定しているので、その10%の20pxになります。

以下のイメージになります。paddingが上下左右とも20pxです。

 

paddingを個別に指定

paddingを個別に指定できます。

指定方法 意味
padding-top paddingを上に指定する
padding-right paddingを右に指定する
padding-bottom paddingを下に指定する
padding-left paddingを左に指定する

paddingを個別に指定するサンプルです。

<style>
  .d1 {
    width: 200px;
    border: 1px solid #000;
  }
  .d2 {
    padding-top: 15px;
    padding-right: 5px;
    padding-bottom: 20px;
    padding-left: 30px;
  }
</style>
<div class="d1">
  <div class="d2">テスト</div>
</div>

7~10行目は、上下左右にそれぞれのpaddingの値を指定しています。

関連の記事

CSS margin 外側の余白/中央・右に寄せる
CSS border ボーダーの表示方法を指定する

△上に戻る