Padding プロパティ

最終更新：2026-09-13

padding Padding プロパティ

padding プロパティは要素のコンテンツと境界線の間の内部スペースを設定します。CSS ボックスモデルの中心的な一部であり、コンテナ内のコンテンツに余白を持たせたり、クリック領域を広げたり、背景に対してコンテンツを際立たせたりするのによく使われます。padding の値は長さまたはパーセンテージのみで、負の値にはできず、相殺もされません。

カテゴリ
初期値	0
継承	いいえ
適用対象	all
アニメーションタイプ	length
CSS バージョン	CSS1
状態	標準

📝 構文

padding: <length> | <percentage>;

⚙️ 値

値	タイプ	説明
`<length>`	タイプ	固定された padding 値。
`<percentage>`	タイプ	包含ブロックの幅に対するパーセンテージ。

▶ 例

以下のコードを編集して、プレイグラウンドでライブ結果を確認してください：

▶ 試す

🌐 ブラウザーサポート

ブラウザー	Chrome	Edge	Firefox	Safari	Opera
padding	✓ v1	✓ v12	✓ v1	✓ v1	✓ v1
すべての主要ブラウザーでサポート

注意： 既定では、padding は width/height の外側に加算される（content-box）ため、要素が予想より大きくなることがあります。box-sizing:border-box を設定すると、指定した width/height の中に padding が含まれます。

ヒント： padding のパーセンテージは、padding-top や padding-bottom を含め、常に包含ブロックの幅に対して計算されます。

❓ よくある質問

Qpadding を負の値にできますか？

Aできません。padding は長さまたはパーセンテージのみを受け入れ、負の値には決してできません。負の値は無効な宣言として無視されます。コンテンツを外側に押し出したい場合は、padding を減らすか、要素全体を外側に引っ張る負の margin（許可されています）を使ってください。padding はコンテンツを内側に圧縮するだけで、外側に拡張することはできない点を覚えておいてください。

Qpadding は背景の範囲に影響しますか？

Aはい。background-color は padding 領域まで塗られます。padding はボックスの背景の一部だからですが、margin 領域までは広がりません。padding が大きいほど塗られる背景も大きくなり、padding を増やすのはボタンのクリック領域を広げて見た目を豊かにする最も直接的な方法です。border-radius も padding 領域内の背景を切り取ります。

Qpadding のパーセンテージは何に対するものですか？

Apadding のパーセンテージは常に包含ブロックの幅に対して解決され、padding-top や padding-bottom も高さではなく幅から計算されます。この特性が、パディング-トップ・ハックという古典的な等比コンテナの技法の源です。padding-top:56.25%（16:9）で高さを押し出し、これが aspect-ratio が登場する前の標準的な手法でした。パーセンテージが高さを完全に無視して常に幅を参照するため機能します。

Qなぜ padding を追加すると要素が大きくなるのですか？

A既定の content-box では width はコンテンツ領域だけをカバーし、padding と border はその上に加算されるため、要素の全体の占める面積が増えるからです。box-sizing:border-box に切り替えると width に padding と border が含まれ、コンテンツは内側に縮み、全体幅は同じままになります。だから border-box がグローバルに推奨されるのです。これがないと、padding を持つ要素はすべて実際に書いた width より広くなります。