padding-left
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
試してみましょう
要素のパディング領域とは、コンテンツと境界との間の領域のことです。
メモ: padding
プロパティは、単一の宣言で要素の四方のパディングをすべて設定することができます。
構文
css
/* <length> の値 */
padding-left: 0.5em;
padding-left: 0;
padding-left: 2cm;
/* <percentage> の値 */
padding-left: 10%;
/* グローバル値 */
padding-left: inherit;
padding-left: initial;
padding-left: revert;
padding-left: revert-layer;
padding-left: unset;
padding-left
プロパティは、以下のリストから選択した値で指定されます。マージンとは異なり、パディングには負の数は使用できません。
値
<length>
-
パディングの寸法を固定値で表したものです。負の数であってはいけません。
<percentage>
-
パディングの寸法を包含ブロックのインラインサイズ(
writing-mode
で横書き言語と定義されている場合は width)に対するパーセント値で示したものです。負の数であってはいけません。
公式定義
初期値 | 0 |
---|---|
適用対象 | table-row-group , table-header-group , table-footer-group , table-row , table-column-group , table-column を除くすべての要素。 ::first-letter および::first-line にも適用されます。 |
継承 | なし |
パーセント値 | 包含ブロックの幅に対する相対値 |
計算値 | 指定されたパーセント値または絶対的な長さ |
アニメーションの種類 | length |
形式文法
padding-left =
<length-percentage [0,∞]>
<length-percentage> =
<length> |
<percentage>
例
左パディングをピクセル数とパーセント値で設定
css
.content {
padding-left: 5%;
}
.sidebox {
padding-left: 10px;
}
仕様書
Specification |
---|
CSS Box Model Module Level 3 # padding-physical |
ブラウザーの互換性
BCD tables only load in the browser
関連情報
- CSS 基本ボックスモデル入門
padding-top
,padding-right
,padding-bottom
およびpadding
一括指定- 対応付けられる論理的プロパティ:
padding-block-start
,padding-block-end
,padding-inline-start
,padding-inline-end
および一括指定のpadding-block
とpadding-inline