padding-top

Baseline 広く利用可能

この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2015年7月以降、すべてのブラウザーで利用可能です。

もっと詳しく
完全な互換性情報を見る

padding-top は CSS のプロパティで、要素のパディング領域における上側の高さを設定します。

試してみましょう

padding-top: 1em;

padding-top: 10%;

padding-top: 20px;

padding-top: 1ch;

padding-top: 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-top プロパティの要素ボックスへの影響]

メモ: padding プロパティは、単一の宣言で要素の四方のパディングをすべて設定することができます。

構文

css

/* <length> 値 */
padding-top: 0.5em;
padding-top: 0;
padding-top: 2cm;
/* <percentage> 値 */
padding-top: 10%;
/* グローバル値 */
padding-top: inherit;
padding-top: initial;
padding-top: revert;
padding-top: revert-layer;
padding-top: unset;

padding-top プロパティは、以下のリストから選択した値で指定されます。マージンとは異なり、パディングには負の数は使用できません。

値

<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-top = 
 <length-percentage [0,∞]> 

<length-percentage> = 
 <length> | 
 <percentage>

例

上パディングをピクセル数とパーセント値で設定

css

.content {
 padding-top: 5%;
}
.side-box {
 padding-top: 10px;
}

仕様書

仕様書
CSS Box Model Module Level 3 # padding-physical

ブラウザーの互換性

MDN の改良に協力

協力方法を知る

このページは MDN の貢献者によって 2025年12月8日に最終更新されました。

GitHub でこのページを表示 • このコンテンツに関する問題を報告