initial commit

1 files changed, 164 insertions, 0 deletions

diff --git a/files/zh-cn/web/css/padding/index.html b/files/zh-cn/web/css/padding/index.html
new file mode 100644
index 0000000000..2578e45113
--- /dev/null
+++ b/files/zh-cn/web/css/padding/index.html
@@ -0,0 +1,164 @@
+---
+title: padding
+slug: Web/CSS/padding
+translation_of: Web/CSS/padding
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>padding</code></strong> <a href="/zh-CN/docs/Web/CSS">CSS</a> <a href="/zh-CN/docs/Web/CSS/Shorthand_properties">简写属性</a>控制元素所有四条边的<a href="/zh-CN/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model#padding-area">内边距区域</a>。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/padding.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>一个元素的内边距区域指的是其内容与其边框之间的空间。</p>
+
+<div class="note">
+<p><strong>注意：</strong>内边距控制的是元素内部空出的空间。相反，{{cssxref("margin")}} 操作元素 <em>外部</em>空出的空间。</p>
+</div>
+
+<h2 id="属性构成">属性构成</h2>
+
+<p>该属性是以下属性的简写：</p>
+
+<ul>
+ <li><a href="/zh-CN/docs/Web/CSS/padding-bottom"><code>padding-bottom</code></a></li>
+ <li><a href="/zh-CN/docs/Web/CSS/padding-left"><code>padding-left</code></a></li>
+ <li><a href="/zh-CN/docs/Web/CSS/padding-right"><code>padding-right</code></a></li>
+ <li><a href="/zh-CN/docs/Web/CSS/padding-top"><code>padding-top</code></a></li>
+</ul>
+
+<h2 id="语法">语法</h2>
+
+<pre class="brush:css no-line-numbers notranslate">/* 应用于所有边 */
+padding: 1em;
+
+/* 上边下边 | 左边右边 */
+padding: 5% 10%;
+
+/* 上边 | 左边右边 | 下边 */
+padding: 1em 2em 2em;
+
+/* 上边 | 右边 | 下边 | 左边 */
+padding: 5px 1em 0 2em;
+
+/* 全局值 */
+padding: inherit;
+padding: initial;
+padding: unset;
+</pre>
+
+<p><code>padding</code> 属性接受 1~4 个值。每个值可以是 {{cssxref("&lt;length&gt;")}} 或 {{cssxref("&lt;percentage&gt;")}}。取值不能为负。</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>
+</dl>
+
+<h2 id="标准定义">标准定义</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="语法格式">语法格式</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="示例">示例</h2>
+
+<h3 id="以像素为单位设置内边距">以像素为单位设置内边距</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;h4&gt;此元素有合适的内边距。&lt;/h4&gt;
+&lt;h3&gt;此元素的内边距很  大！&lt;/h3&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">h4 {
+  background-color: lime;
+  padding: 20px 50px;
+}
+
+h3 {
+  background-color: cyan;
+  padding: 110px 50px 50px 110px;
+}
+</pre>
+
+<h4 id="结果">结果</h4>
+
+<p><span>{{EmbedLiveSample('以像素为单位设置内边距', '100%', 300)}}</span></p>
+
+<h3 id="以像素和百分数为单位设置内边距">以像素和百分数为单位设置内边距</h3>
+
+<pre class="brush: css notranslate">padding: 5%;                /* 所有边：5% 的内边距 */
+
+padding: 10px;              /* 所有边：10px 的内边距 */
+
+padding: 10px 20px;         /* 上边和下边：10px 的内边距 */
+                            /* 左边和右边：20px 的内边距 */
+
+padding: 10px 3% 20px;      /* 上边：   10px 的内边距 */
+                            /* 左边和右边：3% 的内边距 */
+                            /* 下边：   20px 的内边距 */
+
+padding: 1em 3px 30px 5px;  /* 上边：1em  的内边距*/
+                            /* 右边：3px  的内边距*/
+                            /* 下边：30px 的内边距*/
+                            /* 左边：5px  的内边距*/
+</pre>
+
+<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', '#padding-shorthand', 'padding') }}</td>
+   <td>{{ Spec2('CSS3 Box') }}</td>
+   <td>没有变化。</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS2.1', 'box.html#propdef-padding', 'padding') }}</td>
+   <td>{{ Spec2('CSS2.1') }}</td>
+   <td>没有变化。</td>
+  </tr>
+  <tr>
+   <td>{{ Specname('CSS1', '#padding', 'padding') }}</td>
+   <td>{{ Spec2('CSS1') }}</td>
+   <td>初始定义。</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.padding")}}</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>{{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}，和 {{cssxref("padding-left")}}。</li>
+ <li>逻辑相关的属性：{{cssxref("padding-block-start")}}，{{cssxref("padding-block-end")}}，{{cssxref("padding-inline-start")}}，和 {{cssxref("padding-inline-end")}} 与其简称 {{cssxref("padding-block")}} 和 {{cssxref("padding-inline")}}</li>
+</ul>