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
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
|
---
title: margin
slug: Web/CSS/margin
tags:
- CSS
- CSS Property
- Reference
translation_of: Web/CSS/margin
translation_of_original: Web/CSS/margin-new
---
<div>{{CSSRef}}</div>
<p><strong><code>margin</code></strong> CSS 속성은 요소의 네 방향 <a href="/ko/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">바깥 여백 영역</a>을 설정합니다. {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}}, {{cssxref("margin-left")}}의 단축 속성입니다.</p>
<div>{{EmbedInteractiveExample("pages/css/margin.html")}}</div>
<p>위와 아래 여백은 <a href="/ko/docs/Web/CSS/Replaced_element">대체 요소</a>가 아닌 {{HTMLElement("span")}}, {{HTMLElement("code")}} 등 인라인 요소에선 아무 효과도 없습니다.</p>
<div class="note">
<p><strong>참고:</strong> <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">margin</span></font>은 요소의 주위에 빈 공간을 추가합니다. 반면 {{cssxref("padding")}}은 요소의 <strong>내부</strong>에 빈 공간을 만듭니다.</p>
</div>
<h2 id="구문">구문</h2>
<pre class="syntaxbox">/* 네 면 모두 적용 */
margin: 1em;
margin: -3px;
/* 세로방향 | 가로방향 */
margin: 5% auto;
/* 위 | 가로방향 | 아래 */
margin: 1em auto 2em;
/* 위 | 오른쪽 | 아래 | 왼쪽 */
margin: 2px 1em 0 auto;
/* 전역 값 */
margin: inherit;
margin: initial;
margin: unset;
</pre>
<p><code>margin</code> 속성은 한 개, 두 개, 세 개, 혹은 네 개의 값으로 지정할 수 있습니다. 각 값은 {{cssxref("<length>")}}, {{cssxref("<percentage>")}} 또는 키워드 <code>{{anch("auto")}}</code> 중 하나입니다. 음수 값은 요소와 이웃의 거리가 더 가까워지도록 합니다.</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><a id="<length>" name="<length>">{{cssxref("length")}}</a></dt>
<dd>여백의 크기로 고정값 사용.</dd>
<dt><a id="<percentage>" name="<percentage>">{{cssxref("<percentage>")}}</a></dt>
<dd>여백의 크기로 <a href="/ko/docs/Web/CSS/All_About_The_Containing_Block">컨테이닝 블록</a> 너비의 백분율 사용.</dd>
<dt><a id="auto" name="auto"><code>auto</code></a></dt>
<dd>브라우저가 적절한 여백 크기를 선택. 예를 들어 요소를 중앙 정렬하고 싶을 때 사용할 수 있습니다.</dd>
</dl>
<h3 id="형식_구문">형식 구문</h3>
{{csssyntax}}
<h2 id="예제">예제</h2>
<h3 id="간단한_예제">간단한 예제</h3>
<h4 id="HTML">HTML</h4>
<pre class="brush: html"><div class="center">이 요소는 중앙 정렬입니다.</div>
<div class="outside">이 요소는 컨테이너 밖으로 빠져 나갔습니다.</div></pre>
<h4 id="CSS">CSS</h4>
<pre class="brush: css">.center {
margin: auto;
background: lime;
width: 66%;
}
.outside {
margin: 3rem 0 0 -3rem;
background: cyan;
width: 66%;
}</pre>
<p>{{ EmbedLiveSample('간단한_예제') }}</p>
<h3 id="더_많은_예제">더 많은 예제</h3>
<pre class="brush: css">margin: 5%; /* 모두 5% */
margin: 10px; /* 모두 10px */
margin: 1.6em 20px; /* 상하: 1.6em */
/* 좌우: 20px */
margin: 10px 3% -1em; /* 상: 10px */
/* 좌우: 3% */
/* 하: -1em */
margin: 10px 3px 30px 5px; /* 상: 10px */
/* 우: 3px */
/* 하: 30px */
/* 좌: 5px */
margin: 2em auto; /* 상하: 2em */
/* 수평 중앙정렬 */
margin: auto; /* 상하: 0 */
/* 수평 중앙정렬 */</pre>
<h2 id="참고">참고</h2>
<h3 id="수평_중앙정렬">수평 중앙정렬</h3>
<p>현대 브라우저에서 어떤 요소를 중앙에 배치하려면 {{cssxref("display")}}<code>: flex; </code>{{cssxref("justify-content")}}<code>: center;</code>를 사용하면 됩니다.</p>
<p>하지만 플렉스 박스 레이아웃을 지원하지 않는 Internet Explorer 8-9 등 오래된 브라우저를 지원해야 하면 <code>margin: 0 auto;</code>를 대신 사용하세요.</p>
<h3 id="여백_상쇄">여백 상쇄</h3>
<p>두 개 요소의 위와 아래 여백은 종종 합쳐져 하나의 여백이 되고, 그 크기는 둘 중 더 큰 여백과 같아집니다. 더 자세한 정보는 <a href="/ko/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">여백 상쇄 정복</a>을 참고하세요.</p>
<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', '#margin', 'margin') }}</td>
<td>{{ Spec2('CSS3 Box') }}</td>
<td>No significant change</td>
</tr>
<tr>
<td>{{ SpecName('CSS3 Transitions', '#animatable-css', 'margin') }}</td>
<td>{{ Spec2('CSS3 Transitions') }}</td>
<td>Defines <code>margin</code> as animatable.</td>
</tr>
<tr>
<td>{{ SpecName('CSS2.1', 'box.html#margin-properties', 'margin') }}</td>
<td>{{ Spec2('CSS2.1') }}</td>
<td>Removes its effect on inline elements.</td>
</tr>
<tr>
<td>{{ SpecName('CSS1', '#margin', 'margin') }}</td>
<td>{{ Spec2('CSS1') }}</td>
<td>Initial definition</td>
</tr>
</tbody>
</table>
<p>{{cssinfo}}</p>
<h2 id="브라우저_호환성">브라우저 호환성</h2>
<p>{{Compat("css.properties.margin")}}</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><a href="/ko/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">여백 상쇄 정복</a></li>
<li>{{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}}, {{cssxref("margin-left")}}</li>
</ul>
|
