padding

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 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
paddingChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 完全対応 4Opera 完全対応 3.5Safari 完全対応 1WebView Android 完全対応 ≤37Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 1Samsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応

関連情報