ywork2020.com

Title

要素の左辺に接する内側の余白を設定する

目次 (INDEX)

padding-leftとは

padding-left とは次の意味をもつCSSのプロパティです。
padding
読み: パディング
意味: 詰め物
left
読み: レフト
意味: 左側

目次に戻る

padding-leftプロパティの概要

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

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

目次に戻る

構文

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

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

目次に戻る

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

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

初期値: 0

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

div要素

div{padding-left: 0;}

目次に戻る

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

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

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

div要素
padding-left: 20px;

div{
	padding-left: 20px;
}

目次に戻る

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

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

div要素
padding-left: 5%;

div{
	padding-left: 5%;
}

目次に戻る

グローバル値

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

  • inheritは親要素の値の継承を促します。
  • initialは値を初期値の0に戻します。
  • unsetは継承の初期値に戻します。
    ※このプロパティは親要素の値を継承しないのが基本なので、initialと同じ働きをします。
div{padding-left: グローバル値;}

目次に戻る

補足説明

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

目次に戻る

まとめ

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

padding-left: 0;

padding-left: 20px;

padding-left: 5%;

サンプル: ブロック要素

サンプル: インライン要素

目次に戻る