padding-bottom は CSS のプロパティで、要素のパディング領域における下側の高さを設定します。
このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 https://github.com/mdn/interactive-examples をクローンしてプルリクエストを送信してください。
要素のパディング領域とは、コンテンツと境界線の間の領域のことです。
メモ: 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 and ::first-line にも適用されます。 |
| 継承 | なし |
| パーセンテージ | 包含ブロックの幅 |
| 計算値 | 指定されたパーセンテージ値または絶対的な長さ |
| アニメーションの種類 | length |
ブラウザーの互換性
このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。
Update compatibility data on GitHub
| デスクトップ | モバイル | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
padding-bottom | Chrome 完全対応 1 | Edge 完全対応 12 | Firefox 完全対応 1 | IE 完全対応 4 | Opera 完全対応 3.5 | Safari 完全対応 1 | WebView Android 完全対応 ≤37 | Chrome Android 完全対応 18 | Firefox Android 完全対応 4 | Opera Android 完全対応 14 | Safari iOS 完全対応 1 | Samsung Internet Android 完全対応 1.0 |
凡例
- 完全対応
- 完全対応