padding-bottom
padding-bottom
は CSS のプロパティで、要素のパディング領域における下側の高さを設定します。
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
要素のパディング領域とは、コンテンツと境界線の間の領域のことです。
注: 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-bottom
プロパティは、以下のリスト内から選択した値で指定されます。マージンとは異なり、パディングには負の数は使用できません。
値
<length>
- 固定値によるパディングの寸法です。負の数であってはいけません。
<percentage>
- 包含ブロックの width に対するパーセント値によるパディングの寸法です。負の数であってはいけません。
公式定義
初期値 | 0 |
---|---|
適用対象 | table-row-group , table-header-group , table-footer-group , table-row , table-column-group , table-column を除くすべての要素。 ::first-letter および::first-line にも適用されます。 |
継承 | なし |
パーセント値 | 包含ブロックの幅に対する相対値 |
計算値 | 指定されたパーセント値または絶対的な長さ |
アニメーションの種類 | length |
形式文法
例
ピクセル数とパーセント値で下パディングを設定
.content { padding-bottom: 5%; }
.sidebox { padding-bottom: 10px; }
仕様書
仕様書 | 状態 | 備考 |
---|---|---|
CSS Basic Box Model padding-bottom の定義 |
勧告候補 | 変更なし。 |
CSS Level 2 (Revision 1) padding-bottom の定義 |
勧告 | 変更なし。 |
CSS Level 1 padding-bottom の定義 |
勧告 | 初回定義 |
ブラウザーの互換性
BCD tables only load in the browser
関連情報
- CSS 基本ボックスモデルの紹介
padding-top
,padding-right
,padding-left
およびpadding
一括指定- 対応付けられる論理的プロパティ:
padding-block-start
,padding-block-end
,padding-inline-start
,padding-inline-end
および一括指定のpadding-block
とpadding-inline