padding-bottom - CSS: カスケーディングスタイルシート

試してみましょう

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

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

CSS の padding-bottom プロパティの要素ボックスへの影響

メモ: 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

ブラウザーの互換性

Help improve MDN

Learn how to contribute

This page was last modified on ⁨2025年11月1日⁩ by MDN contributors.

View this page on GitHub • Report a problem with this content