padding

CSSプロパティ「padding」の解説とサンプル。

CSSレイアウト実践講座

CSSレイアウト実践講座について

運営者プロフィール

運営者ブログ*

お問い合わせ

padding

内側の余白の値を指定するプロパティ。

値を複数指定することで、辺ごとに異なる線種にすることができる。

値×1 = 4辺全てに適用
値×2 = 上下/左右で適用
値×3 = 上/左右/下で適用
値×4 = 上/右/左/下で適用

1辺のみに適用させたい場合は、padding-top(上)、padding-bottom(下)、padding-left(左)、padding-right(右)を使用する。

注意

paddingとwidthもしくはheightを同時に指定した場合、ブラウザによって表示のされ方が異なります。詳しくは「paddingのブラウザによる解釈の違い」をご覧ください。

pxで指定 指定したい余白のサイズをpxで指定する。
%で指定 親ボックスのサイズに対する割合で指定する。

使用例 - サンプル(A) / サンプル(B)

サンプル(A)

[CSSの記述]

.sampleA { border:solid 1px #cc0000; padding:20px; }

[HTMLの記述]

<p class="sampleA">テキストテキスト</p>

[ブラウザ上の表示]

ボックスの内側4方向に20pxの余白を指定。

サンプル(B)

[CSSの記述]

.sampleB { border:solid 1px #cc0000; padding:0 10%; }

[HTMLの記述]

<p class="sampleB">テキストテキスト</p>

[ブラウザ上の表示]

ボックスの内側の左右に10%の余白を指定。