From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/zh-cn/web/css/padding/index.html | 164 +++++++++++++++++++++++++++++++++ 1 file changed, 164 insertions(+) create mode 100644 files/zh-cn/web/css/padding/index.html (limited to 'files/zh-cn/web/css/padding/index.html') 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 +--- +
{{CSSRef}}
+ +

padding CSS 简写属性控制元素所有四条边的内边距区域。

+ +
{{EmbedInteractiveExample("pages/css/padding.html")}}
+ + + +

一个元素的内边距区域指的是其内容与其边框之间的空间。

+ +
+

注意：内边距控制的是元素内部空出的空间。相反，{{cssxref("margin")}} 操作元素 外部空出的空间。

+
+ +

属性构成

+ +

该属性是以下属性的简写：

+ + + +

语法

+ +
/* 应用于所有边 */
+padding: 1em;
+
+/* 上边下边 | 左边右边 */
+padding: 5% 10%;
+
+/* 上边 | 左边右边 | 下边 */
+padding: 1em 2em 2em;
+
+/* 上边 | 右边 | 下边 | 左边 */
+padding: 5px 1em 0 2em;
+
+/* 全局值 */
+padding: inherit;
+padding: initial;
+padding: unset;
+
+ +

padding 属性接受 1~4 个值。每个值可以是 {{cssxref("<length>")}} 或 {{cssxref("<percentage>")}}。取值不能为负。

+ + + +

取值

+ +
+
{{cssxref("length")}}
+
以固定值为内边距。
+
{{cssxref("percentage")}}
+
相对于包含块的宽度，以百分比值为内边距。
+
+ +

标准定义

+ +

{{cssinfo}}

+ +

语法格式

+ +
{{csssyntax}}
+ +

示例

+ +

以像素为单位设置内边距

+ +

HTML

+ +
<h4>此元素有合适的内边距。</h4>
+<h3>此元素的内边距很  大！</h3>
+
+ +

CSS

+ +
h4 {
+  background-color: lime;
+  padding: 20px 50px;
+}
+
+h3 {
+  background-color: cyan;
+  padding: 110px 50px 50px 110px;
+}
+
+ +

结果

+ +

{{EmbedLiveSample('以像素为单位设置内边距', '100%', 300)}}

+ +

以像素和百分数为单位设置内边距

+ +
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  的内边距*/
+
+ +

规范

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
规范阶段备注
{{ SpecName('CSS3 Box', '#padding-shorthand', 'padding') }}{{ Spec2('CSS3 Box') }}没有变化。
{{ SpecName('CSS2.1', 'box.html#propdef-padding', 'padding') }}{{ Spec2('CSS2.1') }}没有变化。
{{ Specname('CSS1', '#padding', 'padding') }}{{ Spec2('CSS1') }}初始定义。
+ +

浏览器兼容性

+ + + +

{{Compat("css.properties.padding")}}

+ +

参阅

+ + -- cgit v1.2.3-54-g00ecf