padding-top

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

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

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

メモ: 一括指定プロパティの padding では、一度の宣言で要素の四辺のパディングを設定できます。

構文

/* <length> の値 */
padding-top: 0.5em;
padding-top: 0;
padding-top: 2cm;

/* <percentage> の値 */
padding-top: 10%;

/* グローバル値 */
padding-top: inherit;
padding-top: initial;
padding-top: unset;

padding-top プロパティは下記のリストから選択した単一の値で指定します。マージンとは異なり、パディングには負の値を指定することはできません。

<length>
固定値によるパディングの寸法です。負の数であってはいけません。
<percentage>
包含ブロックの width に対するパーセントによるパディングの寸法です。負の数であってはいけません。

形式文法

<length> | <percentage>

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

仕様書

仕様書 状態 備考
CSS Basic Box Model
padding-top の定義
草案 変更なし。
CSS Transitions
padding-top の定義
草案 padding-top がアニメーション可能と定義。
CSS Level 2 (Revision 1)
padding-top の定義
勧告 変更なし。
CSS Level 1
padding-top の定義
勧告 初回定義
初期値0
適用対象all elements, except table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column::first-letter にも適用されます。
継承なし
パーセンテージ包含ブロックの幅
メディア視覚
計算値指定されたパーセンテージ値または絶対的な長さ
アニメーションの種類length
正規順序形式文法で定義される一意のあいまいでない順序

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
padding-topChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 完全対応 4Opera 完全対応 3.5Safari 完全対応 1WebView Android 完全対応 ≤37Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 1Samsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応

関連情報