構文

padding : 上余白 右余白 下余白 左余白;
padding-top : 余白;
padding-bottom : 余白;
padding-left : 余白;
padding-right : 余白;

説明文

　<dvi>や<p>といったブロック要素に属するタグなどでは、ボックスを作成してその中にタグの要素を記述する。「padding」では、矩形範囲の内側の余白を指定できる。つまり、ボックスの枠線から要素本体との間の余白を指定できる。例えば、<div>タグで囲み記事を作る際，その囲み記事の枠線と本文との間を開くために利用できる。

　余白の指定には上側の余白を指定する「padding-top」、下側の余白を指定する「padding-bottom」、左側の余白を指定する「padding-left」、右側の余白を指定する「padding-right」が用意されている。また、「padding」ではすべての方向の余白を一度に指定できる（詳しくは同ページの「paddingの一括指定」を参照）。

　余白はピクセル数（px），割合（%），文字数（em）で指定できる。

[画像のクリックで拡大表示]

使用例

● CSSの定義

div { padding : 0.5em 1em;
      border : 2px solid #000080;
      background-color : #d0d0ff;
}
div h2 { margin : 0px 10px; }
div pre { margin : 0px 20px;
          padding : 10px;
          background-color : #ffffa0;
          font-weight : 700;
}

● HTMLの例

<div>
<h2>ブロック要素内の余白を指定する「padding」</h2>
<p>ブロック要素の枠線と本体の間に余白を設けたい場合はスタイル・シートの
「padding」を利用すると良い。例えば，<div>要素をカコミとして利用する場合
に，枠線の余白を取る場合は以下のように記述すればよい。</p>
<pre>
<div style="padding:10px;">この要素の上下左右に10pxの余白が空く。</p>
</pre>
</div>

● 表示結果

Internet Explorerの表示例
[画像のクリックで拡大表示]
Firefoxの表示例
[画像のクリックで拡大表示]

paddingの一括指定

　「padding-left」など上下左右の余白を個別に指定するほか，「padding」を使うことで一度に余白を指定することが可能だ。「padding」に1つの余白指定をすると上下左右同じ余白が取られる。例えば，

padding : 10px;

と指定すれば，上下左右全ての10pxの余白が取られる。

　また，以下のような記述で，各余白を指定できる。

padding : 全て;
padding : 上下 左右;
padding : 上 左右 下;
padding : 上 右 下 左;

　例えば，以下のように指定すれば，上に10px，下に20px，左右に30pxの余白が取られる。

padding : 10px 30px 20px;

関連項目