padding-top は CSS のプロパティで、要素のパディング領域における上部の高さを設定します。
このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 https://github.com/mdn/interactive-examples をクローンしてプルリクエストを送信してください。
要素のパディング領域とは、コンテンツと境界線と間の空間のことです。
メモ: 一括指定プロパティの 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 |
| 正規順序 | 形式文法で定義される一意のあいまいでない順序 |
ブラウザーの対応
このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。
Update compatibility data on GitHub
| デスクトップ | モバイル | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
padding-top | Chrome 完全対応 1 | Edge 完全対応 12 | Firefox 完全対応 1 | IE 完全対応 4 | Opera 完全対応 3.5 | Safari 完全対応 1 | WebView Android 完全対応 あり | Chrome Android 完全対応 あり | Edge Mobile 完全対応 あり | Firefox Android 完全対応 4 | Opera Android 完全対応 あり | Safari iOS 完全対応 あり | Samsung Internet Android 完全対応 あり |
凡例
- 完全対応
- 完全対応