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 をチェックアウトしてプルリクエストを送信してください。
| 機能 | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
| 基本対応 | 1 | 12 | 1 | 4 | 3.5 | 1 |
| 機能 | Android webview | Chrome for Android | Edge mobile | Firefox for Android | Opera Android | iOS Safari | Samsung Internet |
|---|---|---|---|---|---|---|---|
| 基本対応 | あり | あり | あり | 4 | あり | あり | あり |