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
|
---
title: margin-left
slug: Web/CSS/margin-left
tags:
- CSS
- CSS Property
- Layout
- Reference
translation_of: Web/CSS/margin-left
---
<div>{{CSSRef}}</div>
<p><strong><code>margin-left</code></strong> <a href="/ko/docs/Web/CSS">CSS</a> 속성은 요소의 왼쪽에 <a href="/ko/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">바깥 여백 영역</a><sup>margin area</sup>을 설정합니다. 양수 값은 인접 요소와 거리를 넓히고, 음수 값은 더 좁힙니다.</p>
<div>{{EmbedInteractiveExample("pages/css/margin-left.html")}}</div>
<h2 id="Syntax" name="Syntax">구문</h2>
<pre class="brush:css no-line-numbers">/* <length> 값 */
margin-left: 20px; /* 절대 길이 */
margin-left: 1em; /* 글씨 크기에 상대적 */
margin-left: 5%; /* 가장 가까운 블록 컨테이너의 너비에 상대적 */
/* 키워드 값 */
margin-left: auto;
/* 전역 값 */
margin-left: inherit;
margin-left: initial;
margin-left: unset;
</pre>
<p><code>margin-left</code> 속성은 키워드 <code>auto</code>, <code><length></code>, <code><percentage></code>를 사용해 설정할 수 있습니다. 값은 양수, 0, 음수가 가능합니다.</p>
<h3 id="Values" name="Values">값</h3>
<dl>
<dt>{{cssxref("<length>")}}</dt>
<dd>바깥 여백 크기의 고정 값.</dd>
<dt>{{cssxref("<percentage>")}}</dt>
<dd>바깥 여백 크기와 블록 컨테이너 너비의 비율.</dd>
<dt><code>auto</code></dt>
<dd>사용한 레이아웃 모드에 따라 가로축 미사용 공간 너비의 일부를 바깥 여백에 할당. <code>margin-left</code>와 <code>margin-right</code>의 값이 모두 <code>auto</code>라면 너비를 양 여백에 동일하게 배정합니다. 아래 표가 가능한 여러 경우를 보입니다.
<table class="standard-table">
<thead>
<tr>
<th scope="col">{{cssxref("display")}} 값</th>
<th scope="col">{{cssxref("float")}} 값</th>
<th scope="col">{{cssxref("position")}} 값</th>
<th scope="col"><code>auto</code>의 계산 값</th>
<th scope="col">설명</th>
</tr>
</thead>
<tbody>
<tr>
<th><code>inline</code>, <code>inline-block</code>, <code>inline-table</code></th>
<th><em>any</em></th>
<th><code>static</code> or <code>relative</code></th>
<td><code>0</code></td>
<td>인라인 레이아웃 모드</td>
</tr>
<tr>
<th><code>block</code>, <code>inline</code>, <code>inline-block</code>, <code>block</code>, <code>table</code>, <code>inline-table</code>, <code>list-item</code>, <code>table-caption</code></th>
<th><em>any</em></th>
<th><code>static</code> or <code>relative</code></th>
<td><code>0</code>, except if both <code>margin-left</code> and <code>margin-right</code> are set to <code>auto</code>. In this case, it is set to the value centering the element inside its parent.</td>
<td>블록 레이아웃 모드</td>
</tr>
<tr>
<th><code>block</code>, <code>inline</code>, <code>inline-block</code>, <code>block</code>, <code>table</code>, <code>inline-table</code>, <code>list-item</code>, <code>table-caption</code></th>
<th><code>left</code> or <code>right</code></th>
<th><code>static</code> or <code>relative</code></th>
<td><code>0</code></td>
<td>블록 레이아웃 모드 (플로팅 요소)</td>
</tr>
<tr>
<th><em>any </em><code>table-*</code><em>, except </em><code>table-caption</code></th>
<th><em>any</em></th>
<th><em>any</em></th>
<td><code>0</code></td>
<td>내부 <code>table-*</code> 요소는 바깥 여백을 가지지 않습니다. 대신 {{ cssxref("border-spacing") }}을 사용하세요.</td>
</tr>
<tr>
<th><em>any, except <code>flex</code>,</em> <code>inline-flex</code><em>, or </em><code>table-*</code></th>
<th><em>any</em></th>
<th><em><code>fixed</code></em> or <code>absolute</code></th>
<td><code>0</code>, except if both <code>margin-left</code> and <code>margin-right</code> are set to <code>auto</code>. In this case, it is set to the value centering the border area inside the available <code>width</code>, if fixed.</td>
<td>절대위치 레이아웃 모드</td>
</tr>
<tr>
<th><code>flex</code>, <code>inline-flex</code></th>
<th><em>any</em></th>
<th><em>any</em></th>
<td><code>0</code>, except if there is any positive horizontal free space. In this case, it is evenly distributed to all horizontal <code>auto</code> margins.</td>
<td>플렉스박스 레이아웃 모드</td>
</tr>
</tbody>
</table>
</dd>
</dl>
<h3 id="형식_구문">형식 구문</h3>
{{csssyntax}}
<h2 id="Examples" name="Examples">예제</h2>
<pre class="brush: css">.content { margin-left: 5%; }
.sidebox { margin-left: 10px; }
.logo { margin-left: -5px; }
</pre>
<h2 id="Specifications" name="Specifications">명세</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-margin', 'margin-left') }}</td>
<td>{{ Spec2('CSS3 Box') }}</td>
<td>No significant change</td>
</tr>
<tr>
<td>{{ SpecName('CSS3 Transitions', '#animatable-css', 'margin-left') }}</td>
<td>{{ Spec2('CSS3 Transitions') }}</td>
<td>Defines <code>margin-left</code> as animatable.</td>
</tr>
<tr>
<td>{{SpecName('CSS3 Flexbox', '#item-margins', 'margin-left')}}</td>
<td>{{ Spec2('CSS3 Flexbox') }}</td>
<td>Defines the behavior of <code>margin-right</code> on flex items.</td>
</tr>
<tr>
<td>{{ SpecName('CSS2.1', 'box.html#margin-properties', 'margin-left') }}</td>
<td>{{ Spec2('CSS2.1') }}</td>
<td>Removes its effect on inline elements.</td>
</tr>
<tr>
<td>{{ SpecName('CSS1', '#margin-left', 'margin-left') }}</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.margin-left")}}</p>
|
