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 に対するパーセント値によるパディングの寸法です。負の数であってはいけません。
公式定義
初期値 | 0 |
---|---|
適用対象 | all elements, except table-row-group , table-header-group , table-footer-group , table-row , table-column-group and table-column 。 ::first-letter and ::first-line にも適用されます。 |
継承 | なし |
パーセンテージ | 包含ブロックの幅 |
計算値 | 指定されたパーセンテージ値または絶対的な長さ |
アニメーションの種類 | length |
形式文法
例
上パディングをピクセル数とパーセント値で設定
.content { padding-top: 5%; }
.sidebox { padding-top: 10px; }
仕様書
仕様書 | 状態 | 備考 |
---|---|---|
CSS Basic Box Model padding-top の定義 |
草案 | 変更なし。 |
CSS Level 2 (Revision 1) padding-top の定義 |
勧告 | 変更なし。 |
CSS Level 1 padding-top の定義 |
勧告 | 初回定義 |
ブラウザーの互換性
BCD tables only load in the browser
このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。
関連情報
- CSS 基本ボックスモデルの紹介
padding-right
,padding-bottom
,padding-left
およびpadding
一括指定- 対応付けられる論理的プロパティ:
padding-block-start
,padding-block-end
,padding-inline-start
,padding-inline-end
および一括指定のpadding-block
とpadding-inline