CSS の padding-top プロパティは、要素のパディング領域における上部の高さを設定します。
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
要素のパディング領域とは、コンテンツと境界線の間の領域です。
注: 一括指定プロパティの 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 の定義 |
勧告 | 初回定義。 |
ブラウザー実装状況
このページの互換性一覧表は構造化データから生成されます。データに協力したいのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。
Update compatibility data on GitHub
| デスクトップ | モバイル | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | Android webview | Android 版 Chrome | Edge Mobile | Android 版 Firefox | Android 版 Opera | iOS 版 Safari | Samsung Internet | |
| 基本対応 | 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 完全対応 あり |
凡例
- 完全対応
- 完全対応