padding-left:要素の左辺にあたる内側の余白を指定する

初期値 0
適用対象 table-row-grouptable-header-grouptable-footer-grouptable-rowtable-column-grouptable-columnを除く、全ての要素。::first-letterおよび::first-line
継承 しない
アニメーション <length>値
対応ブラウザ caniuseで確認

padding-leftプロパティの説明

padding-leftは、要素の左辺にあたる内側の余白を指定します。これは、CSSのボックス・モデルにおけるパディング・ボックス(Padding box)の寸法を定義するプロパティの一種です。

要素を配置すると、そこに四角形のボックスが生成されます。paddingは、その四辺全ての余白を制御しますが、padding-leftは左方向の寸法のみを扱います。

パディングに負の値を指定しても無効となります。各辺に対応するプロパティは以下の通りです。

padding-leftに指定できる値

<length>
CSSで使用できる長さを表す単位つきの値です。ピクセル値やメートル法の単位などを使う絶対値、フォントサイズやビューポートなどを使用する相対値が指定できます。
<percentage>
パディングの寸法を包含ブロックの幅(width)を基準に割合(%)で表します。

padding-leftの使い方とサンプル

padding-leftプロパティの構文は以下の通りです。

CSS
/* <length>値 */
padding-left: 10px;
padding-left: 1rem;

/* <percentage>値 */
padding-left: 5%;
padding-left: 10%;

/* グローバル値 */
padding-left: inherit;
padding-left: initial;
padding-left: revert;
padding-left: unset;

padding-leftの実例

それでは実際にpadding-leftプロパティの書き方を見ていきましょう。以下の例は、同じ装飾を施した要素に異なるパディングの値を指定した場合の比較です。コンテナの余白に応じて内容が押し込められている様子を確認できます。

要素の幅はコンテナの30%まで、box-sizingの値はborder-boxです。

表示確認
CSS
.samp_box {
	overflow: auto;
	padding: 0 1rem 1rem;
	background-color: #eee;
	display: flex;
	flex-wrap: wrap;
	align-items: start;
	gap: 1rem;
}
.samp_box > div {
	width: 30%;
	margin-top: 1rem;
	background-color: #fff;
}
div > p {
	margin: 0;
	padding: 0;
	background-color: #09f;
	color: #fff;
}
#pad_1 {
	padding-left: 0;
}
#pad_2 {
	padding-left: 10px;
}
#pad_3 {
	padding-left: 2rem;
}
#pad_4 {
	padding-left: 5%;
}
#pad_5 {
	padding-left: 10%;
}
#pad_6 {
	padding-left: 15%;
}
HTML
<section class="samp_box">
	<div id="pad_1"><p>padding-left: 0;</p></div>
	<div id="pad_2"><p>padding-left: 10px;</p></div>
	<div id="pad_3"><p>padding-left: 2rem;</p></div>
	<div id="pad_4"><p>padding-left: 5%;</p></div>
	<div id="pad_5"><p>padding-left: 10%;</p></div>
	<div id="pad_6"><p>padding-left: 15%;</p></div>
</section>

padding-leftに関連するCSSプロパティ

余白の範囲
margin 要素の外側の余白(マージン)をまとめて指定する
margin-bottom 要素の下辺にあたる外側の余白(マージン)を指定する
margin-left 要素の左辺にあたる外側の余白(マージン)を指定する
margin-right 要素の右辺にあたる外側の余白(マージン)を指定する
margin-top 要素の上辺にあたる外側の余白(マージン)を指定する
padding 要素の内側の余白(パディング)をまとめて指定する
padding-bottom 要素の下辺にあたる内側の余白(パディング)を指定する
padding-left 要素の左辺にあたる内側の余白(パディング)を指定する
padding-right 要素の右辺にあたる内側の余白(パディング)を指定する
padding-top 要素の上辺にあたる内側の余白(パディング)を指定する