padding-bottom
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
試してみましょう
padding-bottom: 1em; padding-bottom: 10%; padding-bottom: 20px; padding-bottom: 1ch; padding-bottom: 0; <section id="default-example"> <div class="transition-all" id="example-element"> <div class="box"> Far out in the uncharted backwaters of the unfashionable end of the western spiral arm of the Galaxy lies a small unregarded yellow sun. </div> </div> </section> #example-element { border: 10px solid #ffc129; overflow: hidden; text-align: left; } .box { border: dashed 1px; } 要素のパディング領域とは、コンテンツと境界との間の領域のことです。
メモ: padding プロパティは、単一の宣言で要素の四方のパディングをすべて設定することができます。
構文
css
/* <length> の値 */ padding-bottom: 0.5em; padding-bottom: 0; padding-bottom: 2cm; /* <percentage> の値 */ padding-bottom: 10%; /* グローバル値 */ padding-bottom: inherit; padding-bottom: initial; padding-bottom: revert; padding-bottom: revert-layer; padding-bottom: unset; padding-bottom プロパティは、以下のリストから選択した値で指定されます。マージンとは異なり、パディングには負の数は使用できません。
値
<length>-
パディングの寸法を固定値で表したものです。負の数であってはいけません。
<percentage>-
パディングの寸法を包含ブロックのインラインサイズ（
writing-modeで横書き言語と定義されている場合は width）に対するパーセント値で示したものです。負の数であってはいけません。
公式定義
| 初期値 | 0 |
|---|---|
| 適用対象 | table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column を除くすべての要素。 ::first-letterおよび::first-line にも適用されます。 |
| 継承 | なし |
| パーセント値 | 包含ブロックの幅に対する相対値 |
| 計算値 | 指定されたパーセント値または絶対的な長さ |
| アニメーションの種類 | length |
形式文法
padding-bottom =
<length-percentage [0,∞]>
<length-percentage> =
<length> |
<percentage>
例
ピクセル数とパーセント値で下パディングを設定
css
.content { padding-bottom: 5%; } .sidebox { padding-bottom: 10px; } 仕様書
| Specification |
|---|
| CSS Box Model Module Level 3 # padding-physical |
ブラウザーの互換性
関連情報
- CSS 基本ボックスモデル入門
padding-top,padding-right,padding-leftおよびpadding一括指定- 対応付けられる論理的プロパティ:
padding-block-start,padding-block-end,padding-inline-start,padding-inline-endおよび一括指定のpadding-blockとpadding-inline