CSSpadding-bottom プロパティは、要素のパディング領域における下側の高さを設定します。

要素のパディング領域とは、コンテンツと境界線の間の領域のことです。

CSS の padding-bottom プロパティの要素ボックスへの影響

メモ: padding プロパティは、単一の宣言で要素の四方のパディングをすべて設定することができます。

構文

/* <length> の値 */
padding-bottom: 0.5em;
padding-bottom: 0;
padding-bottom: 2cm;

/* <percentage> の値 */
padding-bottom: 10%;

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

padding-left プロパティは、以下のリスト内から選択した値で指定されます。マージンとは異なり、パディングには負の数は使用できません。

length
固定値によるパディングの寸法です。負の数であってはいけません。
<percentage>
包含ブロックの width に対するパーセント値によるパディングの寸法です。負の数であってはいけません。

形式文法

<length> | <percentage>

.content { padding-bottom: 5%; }
.sidebox { padding-bottom: 10px; }

仕様書

仕様書 状態 備考
CSS Basic Box Model
padding-bottom の定義
草案 変更なし。
CSS Transitions
padding-bottom の定義
草案 padding-bottom がアニメーション可能と定義。
CSS Level 2 (Revision 1)
padding-bottom の定義
勧告 変更なし。
CSS Level 1
padding-bottom の定義
勧告 初回定義

初期値0
適用対象all elements, except table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column::first-letter にも適用されます。
継承なし
パーセンテージ包含ブロックの幅
メディア視覚
計算値指定されたパーセンテージ値または絶対的な長さ
アニメーションの種類length
正規順序形式文法で定義される一意のあいまいでない順序

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応Chrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 完全対応 4Opera 完全対応 3.5Safari 完全対応 1WebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応

関連情報

ドキュメントのタグと貢献者

このページの貢献者: mfuji09, Sebastianz, Prinz_Rana, fscholz, ethertank, Yuichiro
最終更新者: mfuji09,