padding-left

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

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

paddingは外側4方向の余白を指定するのに対し、padding-leftは4辺のうちの左部のみに指定が反映される。（他の1辺のみ指定する場合は、padding-top（上）、padding-bottom（下）、padding-right（右）を利用する。）

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

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

[CSSの記述]

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

[HTMLの記述]

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

[ブラウザ上の表示]

ボックスの内側左部に20pxの余白を指定。

[CSSの記述]

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

[HTMLの記述]

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

[ブラウザ上の表示]

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

CSSレイアウト実践講座カテゴリ