CSSpadding プロパティは、要素の全四辺のパディング領域を設定します。これは padding-top, padding-right, padding-bottom, padding-left一括指定です。

要素のパディング領域とは、コンテンツと境界線の間の領域のことです。

メモ: パディングは要素の内部に追加の領域を作成します。それに対して、 margin は要素の周りに追加の領域を作成します。

構文

/* 四辺すべてに適用 */
padding: 1em;

/* 上下 | 左右 */
padding: 5% 10%;

/* 上 | 左右 | 下 */
padding: 1em 2em 2em;

/* 上 | 右 | 下 | 左 */
padding: 5px 1em 0 1em;

/* グローバル値 */
padding: inherit;
padding: initial;
padding: unset;

padding プロパティは1つ、2つ、3つ、4つの値を使って指定することができます。それぞれの値は <length> または <percentage> です。負の数は無効です。

  • 値が1つ指定された場合、全四辺に同じパディングが適用される。
  • 値が2つ指定された場合、1つ目のパディングは上下、2つ目は左右の辺に適用される。
  • 値が3つ指定された場合、1つ目のパディングは、2つ目は左右、3つ目はの辺に適用される。
  • 値が4つ指定された場合、パディングはそれぞれの順(時計回り)に適用される。

<length>
固定値によるパディングの寸法です。
<percentage>
コンテナーブロックの width に対するパーセントによるパディングの寸法です。

形式文法

[ <length> | <percentage> ]{1,4}

単純な例

HTML

<h4>This element has moderate padding.</h4>
<h3>The padding is huge in this element!</h3>

CSS

h4 {
  background-color: lime;
  padding: 20px 50px;
}

h3 {
  background-color: cyan;
  padding: 110px 50px 50px 110px;
}

その他のサンプル

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 のパディング  */ 

仕様書

仕様書 策定状況 コメント
CSS Basic Box Model
padding の定義
草案 変更なし。
CSS Transitions
padding の定義
草案 padding をアニメーション可能と定義。
CSS Level 2 (Revision 1)
padding の定義
勧告 変更なし。
CSS Level 1
padding の定義
勧告 初回定義。

初期値一括指定の各プロパティとして
適用対象all elements, except table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column::first-letter にも適用されます。
継承なし
パーセンテージ包含ブロックの幅
メディア視覚
計算値一括指定の各プロパティとして
  • padding-bottom: 指定されたパーセンテージ値または絶対的な長さ
  • padding-left: 指定されたパーセンテージ値または絶対的な長さ
  • padding-right: 指定されたパーセンテージ値または絶対的な長さ
  • padding-top: 指定されたパーセンテージ値または絶対的な長さ
アニメーションの種類length
正規順序形式文法で定義される一意のあいまいでない順序

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応Chrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 完全対応 4Opera 完全対応 3.5Safari 完全対応 1WebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応

関連情報

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

最終更新者: mfuji09,