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;
要素のパディング領域とは、コンテンツと境界線の間の領域です。
| 初期値 | 0 |
|---|---|
| 適用対象 | all elements, except table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column。 ::first-letter にも適用されます。 |
| 継承 | 不可 |
| パーセンテージ | 包含ブロックの幅 |
| メディア | visual |
| 計算値 | 指定されたパーセンテージ値または絶対的な長さ |
| アニメーションの種類 | 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 の定義 |
勧告 | 初回定義。 |
ブラウザー実装状況
このページの互換性一覧表は構造化データから生成されます。データに協力したいのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。
| 機能 | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
| 基本対応 | 1 | 12 | 1 | 4 | 3.5 | 1 |
| 機能 | Android webview | Chrome for Android | Edge mobile | Firefox for Android | Opera Android | iOS Safari | Samsung Internet |
|---|---|---|---|---|---|---|---|
| 基本対応 | あり | あり | あり | 4 | あり | あり | あり |
関連情報
- CSS ボックスモデル
- 一括指定プロパティである
paddingは、一度の宣言で要素の四辺のパディング、padding-top、padding-right、padding-bottom、padding-leftを設定することができます。