files/zh-cn/web/css/margin-left/index.html


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
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209

---
title: margin-left
slug: Web/CSS/margin-left
translation_of: Web/CSS/margin-left
---
<div>{{CSSRef()}}</div>

<h2 id="Summary" name="Summary">Summary</h2>

<p><img alt="Area on which CSS margin-left apply" src="/files/4039/margin-left.svg" style="border-style: solid; border-width: 1px; float: left; margin-bottom: 2em; margin-right: 1em;"><span class="seoSummary"><strong><code>margin-left</code></strong>  属性 设置与元素相关联的盒子模型的左外边距。这个值可以为负值。</span></p>

<p><span class="seoSummary">竖直排列相邻的两个盒子模型的外边距会重叠 <em><a href="/en-US/docs/CSS/margin_collapsing" title="/en-US/docs/CSS/margin_collapsing">margin collapsing</a>。</em></span></p>

<p><span class="seoSummary">在长度(width)被约束这种极少情况下，( <code>即当所有的宽度，左边界，边界，填充内容区域和边缘都被定义</code>), 左边界<code>会被忽略，</code>如果被制定为auto值，会有相同的计算值。</span></p>

<p>{{cssinfo()}}</p>

<h2 id="Syntax" name="Syntax">Syntax</h2>

<pre class="brush:css">/* &lt;length&gt; values */
margin-left: 10px;  /* 绝对长度 */
margin-left: 1em;   /* 相对于字号的长度 */
margin-left: 5%;    /* 相对最近块元素的宽度 */

/* Keyword values */
margin-left: auto;

/* Global values */
margin-left: inherit;
margin-left: initial;
margin-left: unset;
</pre>

<h3 id="Values" name="Values">Values</h3>

<dl>
 <dt><code>&lt;length&gt;</code></dt>
 <dd>一个固定宽度 {{cssxref("&lt;length&gt;")}} 值 : 可以是一个绝对宽度, e.g. in <code>px</code>, 也可以是个相对宽度, e.g. in <code>em</code>, 或者相对视窗的大小, e.g. in <code>vh</code>.</dd>
 <dt><code>&lt;percentage&gt;</code></dt>
 <dd>百分比值 {{cssxref("&lt;percentage&gt;")}} 最近的块容器的宽度 <em>width</em> .</dd>
 <dt><code>auto</code></dt>
 <dd>auto关键词表示在当前布局模式下，浏览器根据接收的左边距自动计算出外边距。如果有几组margin-left和margin-right 设置为auto，那么最后计算的空间分布，会根据display，float，position属性，自动生成以下几种情况：
 <table class="standard-table">
  <thead>
   <tr>
    <th scope="col">Value of {{cssxref("display")}}</th>
    <th scope="col">Value of {{cssxref("float")}}</th>
    <th scope="col">Value of {{cssxref("position")}}</th>
    <th scope="col">Computed value of <code>auto</code></th>
    <th scope="col">Comment</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>Inline layout mode</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>, 除非<code>margin-left</code>和   <code>margin-right同时都设置为auto</code>. 这样的话，元素就被设置为基于父元素居中。</td>
    <td>Block layout mode</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>Block layout mode (floating element)</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>Internal <code>table-*</code> elements don't have margins, use {{ cssxref("border-spacing") }} instead</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>Absolutely positioned layout mode</td>
   </tr>
   <tr>
    <th><code>flex</code>, <code>inline-flex</code></th>
    <th><em>any</em></th>
    <th><em>any</em></th>
    <td>
     <p>在水平方向上有空余空间的情况下，空余的空间会被平均分给水平方向上写有margin-left:auto属性的元素的外边距</p>
    </td>
    <td>Flexbox layout mode</td>
   </tr>
  </tbody>
 </table>
 </dd>
</dl>

<h3 id="Formal_syntax">Formal syntax</h3>

<pre class="syntaxbox">{{csssyntax()}}</pre>

<h2 id="Examples" name="Examples">Examples</h2>

<pre>.content { margin-left:   5%; }
.sidebox { margin-left: 10px; }
.logo    { margin-left: -5px; }
</pre>

<h2 id="Specifications" name="Specifications">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 from CSS 2.1.</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-left</code> on flex items.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS2.1', 'box.html#margin-properties', 'margin-left')}}</td>
   <td>{{Spec2('CSS2.1')}}</td>
   <td>Like in CSS1, but 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>

<h2 id="Browser_Compatibility" name="Browser_Compatibility">Browser compatibility</h2>

<p>{{CompatibilityTable()}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari (WebKit)</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>1.0</td>
   <td>{{CompatGeckoDesktop("1")}}</td>
   <td>3.0</td>
   <td>3.5</td>
   <td>1.0 (85)</td>
  </tr>
  <tr>
   <td><code>auto</code> value</td>
   <td>1.0</td>
   <td>{{CompatGeckoDesktop("1")}}</td>
   <td>6.0 (strict mode)</td>
   <td>3.5</td>
   <td>1.0 (85)</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Phone</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>1.0</td>
   <td>{{CompatGeckoMobile("1")}}</td>
   <td>6.0</td>
   <td>6.0</td>
   <td>1.0</td>
  </tr>
 </tbody>
</table>
</div>