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

CSSのpaddingプロパティで、要素の内側の余白を指定するサンプルです。

目次

仕様 paddingプロパティの仕様
サンプル 数値+pxを指定
  数値+%を指定
  paddingを個別に指定

padding プロパティの仕様

padding : 値  → 上下左右を指定
padding : 値 値  → 上下と左右を指定
padding : 値 値 値  → 上と左右と下を指定
padding : 値 値 値 値 → 上と右と下と左を指定 (時計回りです)

paddingプロパティは、要素の内側の余白を指定します。値は半角スペースで区切ります。

説明
数値 + 単位   指定した単位で設定します。 
数値 + % 親ブロックのwidthに対する割合で設定します。
値を継承しない

  • パディング(padding)は、コンテンツエリアとボーダーの間の余白です。(図の黄の部分)
  • paddingの初期値は0です。
  • ボーター(border)は、要素の周りにある線です。
  • マージン(margin)は、隣の要素と距離を取るために使用します。
  • 以下はMDNのpaddingプロパティのリンクです。
    https://developer.mozilla.org/ja/docs/Web/CSS/padding

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 width 幅を指定するサンプル
CSS box-sizing paddingとborderの表示方法を指定
CSS margin 要素の外側の余白を指定する
CSS border ボーダーの表示方法を指定する

△上に戻る