padding

CSSでは、ボックス上下左右の内側に余白を設けることができます。

本ページでは、paddingプロパティについて説明します。

paddingプロパティとは

paddingプロパティを使うと、ボックス上下左右の内側に作る余白(パディング領域)の大きさを指定できます。

パディング領域は、ボーダー領域(枠線の部分)の内側に設けられるため、コンテンツとボーダー領域の間隔を空けることができます。

paddingは、padding-top、padding-right、padding-botton、padding-leftを一括で指定できます。

paddingの定義は、以下のとおりです。

【paddingの定義】
値	length \| percentage \| inherit
初期値	0
適用対象	すべての要素(table-row-group、table-header-group、table-footer-group、table-row、table-column-group、table-columnを除く)
継承	しない

以下は、padding-rightで使える値と説明です。

length、percentageともに、半角スペースで区切って1〜4つまで並べることができます。指定方法は、以下のとおりです。

例えば、padding:10px 8px 6px 4pxでは、上10px、右8px、下6px、左4pxのパディング領域がとられます。

利用例を示すために、以下のHTMLを使います。

【paddingの利用例を示すためのHTML】

<div class="test">
春になると木漏れ日が差し、草花は土の中から顔を出します。夏になると、太陽は草花に喜びを与えます。
</div>

paddingの利用例は、以下のとおりです。

【paddingの利用例】

.test {
  padding: 10px 20px 10px 20px;
  border: solid;
}

上記は、以下のように表示されます。

枠線の内側に上10px、右20px、下10px、左20pxのパディング領域がとられています。

これは、padding: 10px 20px;と指定しても同じです。

パディング領域は、コンテンツ領域の外側に作られます。widthやheightで指定するのは、デフォルトではコンテンツ領域の横幅や高さです。このため、paddingによってボックス全体が広げられます。

つまり、親要素に収まるようにwidthやheightを指定していても、paddingによってはみ出す可能性があります。詳細は、「ボックスモデル」をご参照ください。

各ブラウザの最新バージョンでのサポート状況は、以下のとおりです。

【パソコン】
項目	IE	Ed	Fx	Ch	Sa	Op
padding	〇	〇	〇	〇	〇	〇

【スマートフォン】
項目	Sa	An	Op	Ch	Fx	Sm
padding	〇	〇	〇	〇	〇	〇

※スマートフォンのFirefoxとChromeは、Android版です。