padding

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

paddingCSS一括指定プロパティで、要素の全四辺のパディング領域を一度に設定します。

試してみましょう

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

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

構成要素のプロパティ

このプロパティは以下の CSS プロパティの一括指定です。

構文

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

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

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

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

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

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

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

<length>

パディングの寸法を固定値で表したものです。

<percentage>

パディングの寸法を包含ブロックのインラインサイズ(writing-mode で横書き言語と定義されている場合は width)に対するパーセント値で示したものです。負の数であってはいけません。

公式定義

初期値一括指定の次の各プロパティとして
適用対象table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column を除くすべての要素。 ::first-letterおよび::first-line にも適用されます。
継承なし
パーセント値包含ブロックの幅に対する相対値
計算値一括指定の次の各プロパティとして
  • padding-bottom: 指定されたパーセント値または絶対的な長さ
  • padding-left: 指定されたパーセント値または絶対的な長さ
  • padding-right: 指定されたパーセント値または絶対的な長さ
  • padding-top: 指定されたパーセント値または絶対的な長さ
アニメーションの種類length

形式文法

padding = 
<'padding-top'>{1,4}

<padding-top> =
<length-percentage [0,∞]>

<length-percentage> =
<length> |
<percentage>

パディングをピクセル数で設定

HTML

html
<h4>この要素には適度なパディングがあります。</h4>
<h3>この要素のパディングが巨大です。</h3>

CSS

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

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

結果

パディングをピクセル数とパーセント値で設定

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

仕様書

Specification
CSS Box Model Module Level 3
# padding-shorthand

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
padding

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

関連情報