padding

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2015年7月⁩.

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

試してみましょう

padding: 1em;

padding: 10% 0;

padding: 10px 50px 20px;

padding: 10px 50px 30px 0;

padding: 0;

<section id="default-example">
  <div class="transition-all" id="example-element">
    <div class="box">
      Far out in the uncharted backwaters of the unfashionable end of the
      western spiral arm of the Galaxy lies a small unregarded yellow sun.
    </div>
  </div>
</section>

#example-element {
  border: 10px solid #ffc129;
  overflow: hidden;
  text-align: left;
}

.box {
  border: dashed 1px;
}

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

メモ: パディングは要素の内部に追加の領域を作成します。それに対して、 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）に対するパーセント値で示したものです。負の数であってはいけません。

公式定義

初期値	一括指定の次の各プロパティとして `padding-bottom`: `0` `padding-left`: `0` `padding-right`: `0` `padding-top`: `0`
適用対象	`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

ブラウザーの互換性

Help improve MDN

Learn how to contribute

This page was last modified on ⁨2025年7月21日⁩ by MDN contributors.

View this page on GitHub • Report a problem with this content