initial commit

1 files changed, 176 insertions, 0 deletions

diff --git a/files/zh-cn/web/css/margin/index.html b/files/zh-cn/web/css/margin/index.html
new file mode 100644
index 0000000000..937456b61d
--- /dev/null
+++ b/files/zh-cn/web/css/margin/index.html
@@ -0,0 +1,176 @@
+---
+title: margin
+slug: Web/CSS/margin
+tags:
+  - CSS
+  - CSS Property
+  - Reference
+translation_of: Web/CSS/margin
+---
+<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("&lt;length&gt;")}}，{{cssxref("&lt;percentage&gt;")}}，或 <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">&lt;div class="center"&gt;此元素会被居中。&lt;/div&gt;
+
+&lt;div class="outside"&gt;此元素会显示在包含块之外。&lt;/div&gt;</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>