CSS padding 属性

定義と使用法

padding 省略形属性は、1つの宣言ですべてのインセット属性を設定します。

説明

この省略形属性は、要素のすべてのインセットの幅を設定するか、または各辺のインセットの幅を設定します。インライン非置換要素に設定されたインセットは、行高の計算に影響を与えません；したがって、要素にインセットと背景がある場合、視覚的に他の行に延びることがあり、他のコンテンツと重なることがあります。要素の背景はインセットを通して延びます。負のインセット値を指定することは許可されていません。

注釈：負の値を使用することは許可されていません。

例1

padding:10px 5px 15px 20px;
  • 上インセットは10pxです
  • 右インセットは5pxです
  • 下インセットは15pxです
  • 左インセットは20pxです

例2

padding:10px 5px 15px;
  • 上インセットは10pxです
  • 右インセットと左インセットは5pxです
  • 下インセットは15pxです

例3

padding:10px 5px;
  • 上インセットと下インセットは10pxです
  • 右インセットと左インセットは5pxです

例4

padding:10px;
  • すべての4つのインセットは10pxです

も参照してください：

CSS チュートリアル：CSS 内边距

HTML DOM リファレンスマニュアル：padding 属性

例

p要素の4つのインセットを設定します：

p
  {
  padding:2cm 4cm 3cm 4cm;
  }

自分で試してみる

CSS 文法

padding: length|initial|inherit;

属性値

値 説明
auto ブラウザがインセットを計算します。
length 具体的な単位でインセットの値を指定します。例えばピクセル、センチメートルなどです。デフォルト値は0pxです。
% 親要素の幅のパーセントでインセットを指定します。
inherit 親要素からインセットを継承するべきです。

技術的詳細

デフォルト値： 0
継承性： no
バージョン： CSS1
JavaScript 文法： object.style.padding="10px 5px"

TIY 実例

すべてのインセット属性を1つの宣言で
この例では、省略形属性を使用して、すべてのインセット属性を1つの宣言で設定することを示しています。1から4つの値が設定できます。

ブラウザのサポート

このテーブルの数字には、この属性を完全にサポートする最初のブラウザのバージョンが記載されています。

Chrome IE / Edge Firefox Safari Opera
1.0 4.0 1.0 1.0 3.5