概要
CSS の padding
プロパティは、要素の 4 辺全てに必要なパディング領域を設定します。パディング領域とは、要素の内容と境界との間の(枠内)余白の事です。負の値は許可されていません。
padding
プロパティは、各辺側の余白 (padding-top
、padding-right
、padding-bottom
、padding-left
) を同時に設定するためのショートハンドプロパティです。
初期値 | 以下の各プロパティのショートハンドとして補完します: |
---|---|
適用対象 | all elements, except table-row-group , table-header-group , table-footer-group , table-row , table-column-group and table-column . It also applies to ::first-letter . |
継承 | 不可 |
相対値の基準 | 包含ブロックの幅 |
メディア | visual |
計算値 | 以下の各プロパティのショートハンドとして補完します:
|
アニメーションの可否 | 可。 の値として補完しますlength |
正規順序 | 形式文法で定義される一意のあいまいでない順序 |
構文
padding: [<length>
|<percentage>
] {1,4}
値
次に示す値を 1 つか 2 つか 3 つか 4 つ指定してください。
- <length>
- 正の固定幅を指定します。詳細は
<length>
を参照して下さい。 - <percentage>
- 包含ブロックの幅に対する割合です。
- 値が1 つの場合、4 辺全てに同じ値が適用されます。
- 値が2 つの場合、1 つ目は上下、2 つ目は左右の辺に適用されます。
- 値が3 つの場合、1 つ目は上、2 つ目は左右、3 つ目は下の辺に適用されます。
- 値が4 つの場合、1 つ目は上、2 つ目は右、3 つ目は下、4 つ目は左の辺に適用されます。
例
padding: 5%; /* 全ての辺に 5% の枠内余白 */
padding: 10px; /* 全ての辺に 10px の枠内余白 */
padding: 10px 20px; /* 上下に 10px の枠内余白 */ /* 左右に 20px の枠内余白 */
padding: 10px 3% 20px; /* 上に 10px の枠内余白 */ /* 左右に 3% の枠内余白 */ /* 下に 20px の枠内余白 */
padding: 1em 3px 30px 5px; /* 上に 1em の枠内余白 */ /* 右に 3px の枠内余白 */ /* 下に 30px の枠内余白 */ /* 左に 5px の枠内余白 */
border:outset; padding:5% 1em;
仕様
仕様書 | 策定状況 | コメント |
---|---|---|
CSS Basic Box Model padding の定義 |
草案 | 変更無し |
CSS Level 2 (Revision 1) padding-top の定義 |
勧告 | 変更無し |
CSS Level 1 padding の定義 |
勧告 | 最初期の仕様 |
ブラウザ実装状況
機能 | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
基本サポート | 1.0 | 1.0 (1.0) | 4.0 | 3.5 | 1.0 (85) |
機能 | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
基本サポート | ? | ? | ? | ? | ? |