blob: ee734928347a6f672ecfc8ff811d7e079fd3cdfe (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
|
---
title: padding
slug: Web/CSS/padding
tags:
- CSS
- CSS パディング
- CSS プロパティ
- リファレンス
- recipe:css-shorthand-property
browser-compat: css.properties.padding
translation_of: Web/CSS/padding
---
{{CSSRef}}
**`padding`** は [CSS](/ja/docs/Web/CSS) の[一括指定プロパティ](/ja/docs/Web/CSS/Shorthand_properties)で、要素の全四辺の[パディング領域](/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model#パディング領域)を一度に設定します。
{{EmbedInteractiveExample("pages/css/padding.html")}}
要素のパディング領域とは、コンテンツと境界との間の領域のことです。
> **Note:** パディングは要素の内部に追加の領域を作成します。それに対して、 {{cssxref("margin")}} は要素の*周り*に追加の領域を作成します。
## 構成要素のプロパティ
このプロパティは以下の CSS プロパティの一括指定です。
- {{cssxref("padding-bottom")}}
- {{cssxref("padding-left")}}
- {{cssxref("padding-right")}}}
- {{cssxref("padding-top")}}
## 構文
```css
/* 四辺すべてに適用 */
padding: 1em;
/* 上下 | 左右 */
padding: 5% 10%;
/* 上 | 左右 | 下 */
padding: 1em 2em 2em;
/* 上 | 右 | 下 | 左 */
padding: 5px 1em 0 1em;
/* グローバル値 */
padding: inherit;
padding: initial;
padding: revert;
padding: unset;
```
`padding` プロパティは 1 つ、2 つ、3 つ、4 つの値を使って指定することができます。それぞれの値は {{cssxref("<length>")}} または {{cssxref("<percentage>")}} です。負の数は無効です。
- 値が **1 つ**指定された場合、**全四辺**に同じパディングが適用される。
- 値が **2 つ**指定された場合、1 つ目のパディングは**上下**、2 つ目は**左右**の辺に適用される。
- 値が **3 つ**指定された場合、1 つ目のパディングは**上**、2 つ目は**左右**、3 つ目は**下**の辺に適用される。
- 値が **4 つ**指定された場合、パディングはそれぞれ**上**、**右**、**下**、**左**の順 (時計回り) に適用される。
### 値
- {{cssxref("<length>")}}
- : パディングの寸法を固定値で表したものです。
- {{cssxref("<percentage>")}}
- : パディングの寸法を包含ブロックの*幅*に対するパーセント値で表したものです。
## 公式定義
{{cssinfo}}
## 形式文法
{{csssyntax}}
## 例
<h3 id="Setting_padding_with_pixels">パディングをピクセル数で設定</h3>
#### HTML
```html
<h4>This element has moderate padding.</h4>
<h3>The padding is huge in this element!</h3>
```
#### CSS
```css
h4 {
background-color: lime;
padding: 20px 50px;
}
h3 {
background-color: cyan;
padding: 110px 50px 50px 110px;
}
```
#### 結果
{{EmbedLiveSample('Setting_padding_with_pixels', '100%', 300)}}
### パディングをピクセル数とパーセント値で設定
```css
padding: 5%; /* 全辺: 5% のパディング */
padding: 10px; /* 全辺: 10px のパディング */
padding: 10px 20px; /* 上と下: 10px のパディング */
/* 左と右: 20px のパディング */
padding: 10px 3% 20px; /* 上: 10px のパディング */
/* 左と右: 3% のパディング */
/* 下: 20px のパディング */
padding: 1em 3px 30px 5px; /* 上: 1em のパディング */
/* 右: 3px のパディング */
/* 下: 30px のパディング */
/* 右: 5px のパディング */
```
## 仕様書
{{Specifications}}
## ブラウザーの互換性
{{Compat}}
## 関連情報
- [CSS 基本ボックスモデル入門](/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model)
- {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, {{cssxref("padding-left")}}
- 対応付けられる論理的プロパティ: {{cssxref("padding-block-start")}}, {{cssxref("padding-block-end")}}, {{cssxref("padding-inline-start")}}, {{cssxref("padding-inline-end")}} および一括指定の {{cssxref("padding-block")}} と {{cssxref("padding-inline")}}
|
