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
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
|
---
title: padding
slug: Web/CSS/padding
tags:
- CSS
- CSS Padding
- CSS Property
- Reference
translation_of: Web/CSS/padding
---
<div>{{CSSRef}}</div>
<p><strong><code>padding</code></strong> <a href="/ko/CSS">CSS</a> 속성은 요소의 네 방향 <a href="/ko/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model#padding-area">안쪽 여백 영역</a>을 설정합니다. {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, {{cssxref("padding-left")}}의 단축 속성입니다.</p>
<div>{{EmbedInteractiveExample("pages/css/padding.html")}}</div>
<p>요소의 안쪽 여백 영역은 콘텐츠와 테두리 사이의 공간입니다.</p>
<div class="note">
<p><strong>참고:</strong> <code>padding</code>은 요소의 내부에 빈 공간을 추가합니다. 반면 {{cssxref("margin")}}은 요소의 <strong>주위</strong>에 빈 공간을 만듭니다.</p>
</div>
<h2 id="구문">구문</h2>
<pre class="brush:css no-line-numbers">/* 네 면 모두 적용 */
padding: 1em;
/* 세로방향 | 가로방향 */
padding: 5% 10%;
/* 위 | 가로방향 | 아래 */
padding: 1em 2em 2em;
/* 위 | 오른쪽 | 아래 | 왼쪽 */
padding: 5px 1em 0 2em;
/* 전역 값 */
padding: inherit;
padding: initial;
padding: unset;
</pre>
<p><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">padding</span></font> 속성은 한 개, 두 개, 세 개, 혹은 네 개의 값으로 지정할 수 있습니다. 각 값은 {{cssxref("<length>")}}, {{cssxref("<percentage>")}} 중 하나로, 음수 값은 유효하지 않습니다.</p>
<ul>
<li><strong>한 개의 값</strong>은 모든 네 면의 여백을 설정합니다.</li>
<li><strong>두 개의 값</strong>을 지정하면 첫 번째는 <strong>위와 아래</strong>, 두 번째는 <strong>왼쪽과 오른쪽</strong> 여백을 설정합니다.</li>
<li><strong>세 개의 값</strong>을 지정하면 첫 번째는 <strong>위</strong>, 두 번째는 <strong>왼쪽과 오른쪽,</strong> 세 번째 값은 <strong>아래</strong> 여백을 설정합니다.</li>
<li><strong>네 개의 값</strong>을 지정하면 각각 <strong>상, 우, 하, 좌</strong> 순서로 여백을 지정합니다. (시계방향)</li>
</ul>
<h3 id="값">값</h3>
<dl>
<dt><strong>{{cssxref("length")}}</strong></dt>
<dd>여백의 크기로 고정값 사용.</dd>
<dt>{{cssxref("percentage")}}</dt>
<dd>여백의 크기로 <a href="/ko/docs/Web/CSS/All_About_The_Containing_Block">컨테이닝 블록</a> 너비의 백분율 사용.</dd>
</dl>
<h3 id="형식_구문">형식 구문</h3>
{{csssyntax}}
<h2 id="예제">예제</h2>
<h3 id="간단한_예제">간단한 예제</h3>
<h4 id="HTML">HTML</h4>
<pre class="brush: html"><h4>평범한 안쪽 여백을 가진 요소.</h4>
<h3>엄청난 안쪽 여백을 가진 요소!</h3>
</pre>
<h4 id="CSS">CSS</h4>
<pre class="brush: css">h4 {
background-color: lime;
padding: 20px 50px;
}
h3 {
background-color: cyan;
padding: 110px 50px 50px 110px;
}
</pre>
<p><span>{{EmbedLiveSample('간단한_예제', '100%', 300)}}</span></p>
<h3 id="더_많은_예제"><span>더 많은 예제</span></h3>
<pre class="brush: 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 */
</pre>
<h2 id="명세">명세</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{ SpecName('CSS3 Box', '#the-padding', 'padding') }}</td>
<td>{{ Spec2('CSS3 Box') }}</td>
<td>No change.</td>
</tr>
<tr>
<td>{{ SpecName('CSS3 Transitions', '#animatable-css', 'padding') }}</td>
<td>{{ Spec2('CSS3 Transitions') }}</td>
<td>Defines <code>padding</code> as animatable.</td>
</tr>
<tr>
<td>{{ SpecName('CSS2.1', 'box.html#propdef-padding', 'padding') }}</td>
<td>{{ Spec2('CSS2.1') }}</td>
<td>No change.</td>
</tr>
<tr>
<td>{{ Specname('CSS1', '#padding', 'padding') }}</td>
<td>{{ Spec2('CSS1') }}</td>
<td>Initial definition.</td>
</tr>
</tbody>
</table>
<p>{{cssinfo}}</p>
<h2 id="Browser_Compatibility" name="Browser_Compatibility">브라우저 호환성</h2>
<p>{{Compat("css.properties.padding")}}</p>
<h2 id="같이_보기">같이 보기</h2>
<ul>
<li><a href="/ko/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">CSS 기본 박스 모델 입문</a></li>
<li>{{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, {{cssxref("padding-left")}}.</li>
</ul>
|
