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><code><strong>margin</strong></code> 属性为给定元素设置所有四个（上下左右）方向的外边距属性。也就是 {{cssxref("margin-top")}}，{{cssxref("margin-right")}}，{{cssxref("margin-bottom")}}，和 {{cssxref("margin-left")}} 四个外边距属性设置的<a href="/zh-CN/docs/Web/CSS/Shorthand_properties">简写</a>。</p>
<div>{{EmbedInteractiveExample("pages/css/margin.html")}}</div>
<p class="hidden">这个可交互示例的源码保存在一个 GitHub 仓库中。如果你有兴趣为这个交互示例项目做作出贡献，请 clone 下 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> 然后给我们提一个 pull request.</p>
<p>上、下外边框的设置对<em>不<a href="/zh-CN/docs/Web/CSS/Replaced_element">可替换</a></em>内联元素，如 {{HTMLElement("span")}} 和 {{HTMLElement("code")}}，无效。</p>
<div class="note">
<p><strong>注意：</strong> 外边距控制的是元素外部空出的空间。相反，{{cssxref("padding")}} 操作元素<em>内部</em>空出的空间。</p>
</div>
<h2 id="语法">语法</h2>
<pre class="brush:css no-line-numbers notranslate">/* 应用于所有边 */
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> 属性接受 1~4 个值。每个值可以是 {{cssxref("<length>")}}，{{cssxref("<percentage>")}}，或 <code><a href="#auto">auto</a></code>。取值为负时元素会比原来更接近临近元素。</p>
<ul>
<li>当只指定<strong>一个</strong>值时，该值会统一应用到<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>，<strong>右边</strong>，<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="https://developer.mozilla.org/zh-CN/docs/Web/CSS/Containing_block">包含块</a>的<em>宽度</em>，以百分比值为外边距。</dd>
<dt><code>auto</code></dt>
<dd>让浏览器自己选择一个合适的外边距。有时，在一些特殊情况下，该值可以使元素居中。</dd>
</dl>
<h3 id="语法格式">语法格式</h3>
<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
<h2 id="示例">示例</h2>
<h3 id="简单的例子">简单的例子</h3>
<h4 id="HTML">HTML</h4>
<pre class="brush: html notranslate"><div class="center">此元素会被居中。</div>
<div class="outside">此元素会显示在包含块之外。</div></pre>
<h4 id="CSS">CSS</h4>
<pre class="brush: css; highlight:[2,8] notranslate">.center {
margin: auto;
background: lime;
width: 66%;
}
.outside {
margin: 3rem 0 0 -3rem;
background: cyan;
width: 66%;
}</pre>
<p>{{ EmbedLiveSample('简单的例子','100%',120) }}</p>
<h3 id="更多的例子">更多的例子</h3>
<pre class="brush: css notranslate">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; /* 上边和下边：无外边距 */
/* 水平方向居中 */
</pre>
<h2 id="贴士">贴士</h2>
<h3 id="水平居中">水平居中</h3>
<p>在现代浏览器中实现水平居中，可以使用 {{cssxref("display")}}<code>: flex; </code>{{cssxref("justify-content")}}<code>: center;</code>。</p>
<p>不过，在 IE8-9 这样的不支持弹性盒布局的旧式浏览器中，上述代码并不会生效。此时要实现在父元素中居中，可使用 <code>margin: 0 auto;</code>。</p>
<h3 id="外边距重叠">外边距重叠</h3>
<p>上下元素的下上外边距有时会重叠，实际空出的空间长度变为两外边距中的较长值。查看<a href="/zh-CN/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">外边距重叠</a>可找到更多信息。</p>
<h2 id="规范">规范</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">规范</th>
<th scope="col">阶段</th>
<th scope="col">备注</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{ SpecName('CSS3 Box', '#margin', 'margin') }}</td>
<td>{{ Spec2('CSS3 Box') }}</td>
<td>没有明显变更。</td>
</tr>
<tr>
<td>{{ SpecName('CSS2.1', 'box.html#margin-properties', 'margin') }}</td>
<td>{{ Spec2('CSS2.1') }}</td>
<td>削去内联元素上下方向的外边距的作用。</td>
</tr>
<tr>
<td>{{ SpecName('CSS1', '#margin', 'margin') }}</td>
<td>{{ Spec2('CSS1') }}</td>
<td>初始定义。</td>
</tr>
</tbody>
</table>
<p>{{cssinfo}}</p>
<h2 id="浏览器兼容性">浏览器兼容性</h2>
<div class="hidden">此网页上的兼容性表格由结构化数据生成。如果你有兴趣为这些数据作出贡献，请点击 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> 在上面提交一个 pull request.</div>
<p>{{Compat("css.properties.margin")}}</p>
<h2 id="参阅">参阅</h2>
<ul>
<li><a class="internal" href="/zh-CN/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">CSS 基础框盒模型介绍 </a></li>
<li><a class="internal" href="/zh-CN/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">外边距重叠</a></li>
<li>{{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}}, and {{cssxref("margin-left")}}</li>
<li>逻辑相关的属性：{{cssxref("margin-block-start")}}, {{cssxref("margin-block-end")}}, {{cssxref("margin-inline-start")}}，和 {{cssxref("margin-inline-end")}} 与其简称 {{cssxref("margin-block")}} 和 {{cssxref("margin-inline")}}</li>
</ul>
|
