Title

paddingとは

padding とは次の意味をもつCSSのプロパティです。

padding

読み: パディング
意味: 詰め物

目次に戻る

paddingプロパティの概要

このプロパティは、要素の境界線に接する内側の余白の幅を設定することができます。

要素を容れ物に例え、容器と内包物の間に詰め物をする様子からpaddingと呼ばれます。

要素の余白には、境界線に接する外側の余白と内側の余白があり、このpaddingプロパティは、内側の余白の幅を設定します。 外側の余白を設定する場合は、marginプロパティを使用します。

目次に戻る

構文

サンプルを見る前に構文を確認しておきます。このプロパティの記述は以下のような書き方になります。

セレクター{
	padding: 四辺値;
	padding: 上下辺値 左右辺値;
	padding: 上辺値 左右辺値 下辺値;
	padding: 上辺値 右辺値 下辺値 左辺値;
}

目次に戻る

実機サンプルとサンプルコード

このページのサンプルではdiv要素を使っての検証を行っていきたいと思います。 paddingは要素の内側の余白をコントロールするプロパティなのでdiv要素のコンテンツ領域に画像を配置して、 領域の視認を行っていきます。

初期値: 0

div{padding: 0;}

目次に戻る

数値: 単位付き数値で余白を設定する

数値でパディングを設定する場合には、単位付きの絶対値や相対値を使って余白を設定する方法があります。

単位や絶対値、相対値については CSSの単位について のページを参照してください。

div{
	padding: 20px;
}

目次に戻る

パーセンテージ値: パーセントで余白を設定する

パーセンテージ値を使用した場合、親要素の 横幅(width) に対するパーセンテージを指定したことになります。

div{
	padding: 5%;
}

目次に戻る

個別指定: 上下左右の余白を別々に設定する

このプロパティは設定値を半角スペースで区切りながら指定することで上下左右の 余白を個別に設定することができます。この書き方には、いくつかのバリエーションが存在しますので、 まず構文から見ていきましょう。

セレクタ{
	padding: 上下値 左右値;
	padding: 上値 左右値 下値;
	padding: 上値 右値 下値 左値;
}

それでは実際の検証です。上記の構文の4行目を使って上下左右を個別に設定していきます。

div{
	padding: 10px 20px 20px 10px;
}

目次に戻る

paddingの個別プロパティを使用する

このpaddingプロパティには上下左右のうち、一つの余白のみを設定するための個別プロパティが存在します。 以下の四つが個別プロパティです。

セレクタ{
	padding-top: 上値;
	padding-bottom: 下値;
	padding-left: 左値;
	padding-right: 右値;
}

また、一般的に使われることは少ないと思いますが、上記コードと同種のプロパティとして下記のプロパティもリストしておきます。 使用方法は同じです。

• padding-block-start: 上値;
• padding-block-end: 下値;
• padding-inline-start: 左値;
• padding-inline-end: 右値;

目次に戻る

グローバル値

paddingプロパティに対してのグローバルキーワードは以下の3つです。 ただし、このキーワードはブラウザによっては、完全に機能するかは分かりません。

• inheritは親要素の値の継承を促します。
• initialは値を初期値の0に戻します。
• unsetは継承の初期値に戻します。
  ※このプロパティは親要素の値を継承しないのが基本なので、initialと同じ働きをします。

div{padding: グローバル値;}

目次に戻る

補足説明

• すべての要素に適用可能
• 親要素の値を継承しない

目次に戻る

まとめ

ここでは、検証としてブロック要素とインライン要素に同じCSSを設定した場合の適用状態が確認できます。 コードの部分をクリックすると、サンプルにCSSが反映されます。

padding: 0;

padding: 1em 2em 1em 2em;

padding: 5px 10px;

padding-top: 10px;

padding-bottom: 10px;

padding-left: 10px;

目次に戻る