CSSpadding-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;

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

CSS の 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
正規順序形式文法で定義される一意のあいまいでない順序

構文

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

構文形式

<length> | <percentage>

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

仕様書

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

ブラウザー実装状況

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応112143.51
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応 あり あり あり4 あり あり あり

関連情報

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

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