CSSパディングプロパティ

❮前へ完全なCSSリファレンス次へ❯

例

<p>要素の4辺すべてのパディングを35ピクセルに設定します。

p {
padding: 35px;
}

以下の「自分で試してみてください」の例をもっと見てください。

定義と使用法

要素のパディングは、そのコンテンツとその境界線の間のスペースです。

プロパティは、次のpadding略記プロパティです。

注：パディングは要素内に余分なスペースを作成し、マージンは要素の周囲に余分なスペースを作成します。

このプロパティには、1〜4個の値を指定できます。

paddingプロパティに4つの値がある場合：

パディング：10px 5px 15px 20px;
- トップパディングは10pxです
- 右のパディングは5pxです
- 下部のパディングは15pxです
- 左のパディングは20pxです

paddingプロパティに3つの値がある場合：

パディング：10px 5px 15px;
- トップパディングは10pxです
- 左右のパディングは5pxです
- 下部のパディングは15pxです

paddingプロパティに2つの値がある場合：

パディング：10px 5px;
- 上下のパディングは10pxです
- 左右のパディングは5pxです

paddingプロパティに1つの値がある場合：

パディング：10px;
- 4つのパディングはすべて10pxです

注：負の値は許可されていません。

デフォルト値：	0
遺伝性の：	いいえ
アニメート可能：	はい、個々のプロパティを参照してください。アニメート可能について読む
バージョン：	CSS1
JavaScript構文：	object .style.padding = "100px 20px"

ブラウザのサポート

表の数字は、プロパティを完全にサポートする最初のブラウザバージョンを示しています。

Property
padding	1.0	4.0	1.0	1.0	3.5

CSS構文

padding: length|initial|inherit;

プロパティ値

Value	Description	Play it
length	Specifies the padding in px, pt, cm, etc. Default value is 0. Read about length units
%	Specifies the padding in percent of the width of the containing element
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

その他の例

例

<p>要素のパディングを上下に35ピクセル、左右に70ピクセルに設定します。

p {
padding: 35px 70px;
}

例

<p>要素のパディングを上部が35ピクセル、左右が70ピクセル、下部が50ピクセルに設定します。

p {
padding: 35px 70px 50px;
}

例

<p>要素のパディングを上が35ピクセル、右が70ピクセル、下が50ピクセル、左が90ピクセルに設定します。

p {
padding: 35px 70px 50px 90px;
}

CSSリファレンス

CSS Properties