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

サンプル	paddingとは
	paddingに数値+pxを指定
	paddingに数値+%を指定
	paddingを個別に指定

paddingとは

パディング(padding)は、コンテンツエリアとボーダーの間の余白です。

ボーター(border)は、要素の周りにある線です。
マージン(margin)は隣の要素と距離を取るために使用します。

padding : 値　　→　上下左右を指定

padding : 値　値　　→　上下と左右を指定

padding : 値　値　値　　→　上と左右と下を指定

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

値は半角スペースで区切ります。

値は以下を設定します。

数値 + 単位	指定した単位で指定します。数値+px等を指定。初期値は０。
数値 + %	親ブロックのwidthに対する割合で指定します。

paddingに数値+pxを指定

上下左右のpaddingに20pxを指定しています。それぞれの値は半角スペースで区切ります。

<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>

paddingに数値+%を指定

上下左右のpaddingに10%を指定しています。それぞれの値は半角スペースで区切ります。
その場合の%は、親のwidthに対する割合になります。heightではありません。
親のwidthは200pxなので、その10%の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>

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>