概要

CSS の padding プロパティは、要素の 4 辺全てに必要なパディング領域を設定します。パディング領域とは、要素の内容と境界との間の(枠内)余白の事です。負の値は許可されていません。

padding プロパティは、各辺側の余白 (padding-toppadding-rightpadding-bottompadding-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
計算値以下の各プロパティのショートハンドとして補完します:
  • padding-bottom: 指定されたパーセンテージ値または絶対的な長さ
  • padding-left: 指定されたパーセンテージ値または絶対的な長さ
  • padding-right: 指定されたパーセンテージ値または絶対的な長さ
  • padding-top: 指定されたパーセンテージ値または絶対的な長さ
アニメーションの可否可。 の値として補完します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
基本サポート ? ? ? ? ?

関連情報

ドキュメントのタグと貢献者

 このページの貢献者: Sebastianz, Simplexible, Prinz_Rana, fscholz, ethertank, sosleepy, Yuichiro
 最終更新者: Sebastianz,