関連プロパティ

パディングに関わるプロパティは、以下の各プロパティです。

  • padding : 一括指定プロパティ
    • padding-top : 個別指定プロパティ
    • padding-right : 個別指定プロパティ
    • padding-bottom : 個別指定プロパティ
    • padding-left : 個別指定プロパティ

    • (個別指定プロパティは、当該指定箇所が違うだけなので、一括指定プロパティのページで説明を記述しています。)

パディングとは

パディングは、
コンテンツの端と
ボックスのパディングの端の
余白です。

マージン
ボーダー
パディング
コンテンツ領域

パディングは、コンテンツの端とボックスのパディングの端の間に挿入され、コンテンツと境界の間にスペースを提供します。

インライン要素の パディング

  1. cdvSample031 > div { outline: dashed 1px #0000ff; padding: 1em; }
  2. cdvSample031 > span { outline: dashed 1px #ff0000; padding: 1em; }
  1. <div class="cdvSample031">
  2. <div>ブロック要素</div>
  3. <span>パディング1em;</span
  4. ><span>パディング1em;</span
  5. ><span>パディング1em;</span>
  6. <div>ブロック要素</div>

インライン要素の閉じタグを複数行に渡らせることで、タグ内に改行コードを押し込む対応をしています。
テキスト，インライン要素後の改行コードは１つのスペース相当と扱われてしまう為です。

ブロック要素
パディング1em;パディング1em;パディング1em;
ブロック要素

幅と高さ

width

width(height) プロパティの適用方法を制御する box-sizing プロパティ により、パティングが含まれるか否かが変わります。

  1. cdvSample041 > div { outline: dashed 1px #0000ff; padding: 1em; width: 3em; }
  1. <div class="cdvSample041">
  2. <div style="box-sizing: content-box;"><div>例</div></div></div>

例示の雛型です。style属性を書き換えて例示しています。

例
  1. box-sizing: border-box;

box-sizing プロパティを border-box と指定しました。指定された幅と高さは、要素の境界ボックスを決定します。つまりパディングまたは境界線は、この指定された幅と高さの内側に配置されます。

例

<percentage> 値

padding プロパティのパーセンテージは包含ブロックの幅なので、box-sizing プロパティ による影響はありません。コンテンツボックスの幅が変わるなどの間接的な影響はありますが。

  1. cdvSample042 > div { outline: dashed 1px #0000ff; padding: 1em; }
  2. cdvSample042 > div > div { outline: solid 1px #0000ff; padding: 20%; }
  3. cdvSample042 > div > div > div { outline: dashed 1px #0000ff; }
  1. <div class="cdvSample042">
  2. <div style=""><div><div>例</div></div></div></div>

例示の雛型です。style属性を書き換えて例示しています。

例
  1. box-sizing: content-box;
  2. width: 5em;

box-sizing プロパティを content-box と指定しました。

例
  1. box-sizing: border-box;
  2. width: 7em;

box-sizing プロパティを border-box と指定しました。

例

背景

background-clip

background-clip プロパティにより、背景の範囲にパティングが含まれるか否かが変わります。

  1. cdvSample051 > div { outline: dashed 1px #0000ff; padding: 1em; color: #000000; background-color: #ffccff; }
  1. <div class="cdvSample051">
  2. <div style="">例</div></div>

例示の雛型です。style属性を書き換えて例示しています。

例
  1. background-clip: border-box;

background-clip プロパティを border-box と指定しました。

例
  1. background-clip: content-box;

background-clip プロパティを content-box と指定しました。

例

background-origin

background-origin プロパティにより、背景の原点が指定されパティングにどう映るか影響します。

  1. cdvSample052 > div { outline: dashed 1px #0000ff; padding: 0.5em; }
  2. cdvGrid { ここに、１文字サイズの方眼罫の背景を描画する記述があります。 }
  1. <div class="cdvSample052">
  2. <div class="cdvGrid" style="">例</div></div>

例示の雛型です。style属性を書き換えて例示しています。

例
  1. background-origin: padding-box;

background-origin プロパティを padding-box と指定しました。

例
  1. background-origin: content-box;

background-origin プロパティを content-box と指定しました。

例