Home
/
内容の周りの領域の指定
/ 内容の上下左右の領域をまとめて指定 :
padding
内容の上下左右の領域をまとめて指定 :
padding
::: 書 式 :::
padding
: 上側の領域幅 右側の領域幅 下側の領域幅 左側の領域幅
::: プロパティ値 :::
領域幅には、下記の値を指定します。
単位付きの数値 => 「
単位について
」を参照
%
::: 解 説 :::
「
padding
」プロパティで、上下左右の内容と枠線の間の領域を一度に設定できます。
この場合、それぞれの値を半角スペースで区切ります。
また、指定した値の個数により、下記のように領域幅が設定されます。
・値が1つの場合: ①上下左右の領域幅
・値が2つの場合: ①上下の領域幅 ②左右の領域幅
・値が3つの場合: ①上側領域幅 ②左右の領域幅 ③下側領域幅
・値が4つの場合: ①上側領域幅 ②右側領域幅 ③下側領域幅 ④左側領域幅
::: 対応ブラウザ :::
IE
Firefox
Opera
Chrome
Safari
8
7
6
5.5
5
3.5
3
2
1.5
1
10
9
8
7
6
2
1
4
3
2
1
○
○
○
○
○
○
○
○
○
○
○
○
○
○
○
○
○
○
○
○
○
[ 対応状況 : ○=対応、△=一部対応、×=未対応 ]
::: サンプル :::
[ サンプル画面
]
スタイルシート(CSS) = 内容の上下左右の領域をまとめて指定 =
スタイルシート(CSS) = 内容の上下左右の領域をまとめて指定 =
「padding: 0px」を指定
「padding: 20px」を指定
「padding: 30px 40px 50px 60px」を指定
</body> </html>
関連項目
CSSの基本
CSS機能別プロパティ一覧
CSSインデックス
内容の周りの領域の指定
padding
padding-top
padding-bottom
padding-left
padding-right
Copyright (C) 2009 Html-Labs All Rights Reserved.
この場合、それぞれの値を半角スペースで区切ります。
また、指定した値の個数により、下記のように領域幅が設定されます。
・値が1つの場合: ①上下左右の領域幅
・値が2つの場合: ①上下の領域幅 ②左右の領域幅
・値が3つの場合: ①上側領域幅 ②左右の領域幅 ③下側領域幅
・値が4つの場合: ①上側領域幅 ②右側領域幅 ③下側領域幅 ④左側領域幅