プロパティ padding

プロパティ padding は、要素の内側の余白を設定します。プロパティの値として使用できるのは、あらゆるサイズの単位です。デフォルトでは、各ブラウザは要素にさまざまな余白を追加する場合があります。このプロパティは、以下のプロパティの短縮形です: padding-top, padding-right, padding-bottom, padding-left。

構文

セレクタ {
	padding: 値;
}

パラメータの数

プロパティ padding は、空白で区切られた 1、2、3、または 4 個の値を受け付けます:

数	説明
`1`	1つの値は、要素の全方向の余白を設定します。
`2`	1番目の値は上下の余白を設定し、2番目の値は左右の余白を設定します。
`3`	1番目の値は上の余白を、2番目の値は左右の余白を、3番目の値は下の余白を設定します。
`4`	1番目の値は上の余白を、2番目の値は右の余白を、3番目の値は下の余白を、4番目の値は左の余白を設定します。

例

このケースでは、デフォルトでは内側の余白はゼロとなり、テキストはブロックの境界にぴったりつきます:

<div id="elem">
	some long text
</div>

#elem {
	padding: 0;
	width: 300px;
	border: 1px solid black;
	text-align: justify;
}

例

では、内側の余白を 30px にしてみましょう:

<div id="elem">
	some long text
</div>

#elem {
	padding: 30px;
	width: 300px;
	border: 1px solid black;
	text-align: justify;
}

例

現在、上下の余白は 20px、左右の余白は 5px になります:

<div id="elem">
	some long text
</div>

#elem {
	padding: 20px 5px;
	width: 300px;
	border: 1px solid black;
	text-align: justify;
}

例

現在、上の余白は 5px、右の余白は 15px、下の余白は 25px、左の余白は 35px です:

<div id="elem">
	some long text
</div>

#elem {
	padding: 5px 15px 25px 35px;
	width: 300px;
	border: 1px solid black;
	text-align: justify;
}

プロパティ padding

構文

パラメータの数

例

例

例

例

関連項目