Title

padding-bottomとは

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

padding

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

bottom

読み: ボトム
意味: 下

目次に戻る

padding-bottomプロパティの概要

このプロパティは、要素の下側かつ内側の余白の幅を設定することができます。

要素の余白には、境界線の外側にある余白と内側にある余白があり、 このpadding-bottomは、境界線の下辺部に接した内側の余白のみを設定できる個別プロパティとなります。

目次に戻る

構文

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

セレクター{padding-bottom: 設定値;}

目次に戻る

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

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

初期値: 0

初期値は0です。余白はありません。

div{padding-bottom: 0;}

目次に戻る

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

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

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

div{
	padding-bottom: 20px;
}

目次に戻る

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

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

div{
	padding-bottom: 5%;
}

目次に戻る

グローバル値

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

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

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

目次に戻る

補足説明

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

目次に戻る

まとめ

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

padding-bottom: 0;

padding-bottom: 20px;

padding-bottom: 5%;

目次に戻る