语法
padding: length | initial | inherit;
填充属性示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
p {
background-color: #1c87c9;
color: #fff;
padding: 15px 30px 20px 40px;
}
</style>
</head>
<body>
<h2>Padding 属性示例</h2>
<p>具有背景颜色、颜色和填充属性的段落。</p>
</body>
</html>
在给定的示例中，此代码意味着顶部的内边距必须为 15px，右侧为 30px，底部为 20px，左侧为 40px。
带有“%”值的填充属性示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
p {
background-color: #1c87c9;
color: #fff;
padding: 5% 10% 10% 5%;
}
</style>
</head>
<body>
<h2>Padding 属性示例</h2>
<p>具有背景颜色、颜色和填充属性的段落。</p>
</body>
</html>
在下面的示例中，指定了两个值。
第一个值设置顶部和底部，第二个值设置右侧和左侧：
具有两个值的 padding 属性示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
p {
background-color: #1c87c9;
color: #fff;
padding: 20px 40px;
}
</style>
</head>
<body>
<h2>Padding 属性示例</h2>
<p>具有背景颜色、颜色和填充属性的段落。</p>
</body>
</html>
padding 属性用于在元素内容的所有侧面创建填充空间。
填充值使用长度或者百分比设置。
负值无效。
CSS padding 属性是以下属性的简写：
- padding-top
- padding-bottom
- padding-left
- padding-right
我们可以对所有边（顶部、底部、左侧、右侧）使用 padding 属性。
padding 属性可以定义为一、二、三或者四个值：
- 当指定四个值时，第一个值设置顶部，第二个值设置右侧，第三个值设置底部，第四个值设置左侧。
- 当指定三个值时，第一个值设置顶边，第二个值设置左右边，第三个值设置底边。
- 当指定两个值时，第一个值设置顶边和底边，第二个值设置左右边。
- 如果填充只有一个值，它将应用于所有四个值
| 初始值 | 0. |
|---|---|
| 应用于 | 所有元素，除非display属性设置为table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column。它还适用于::first-letter伪元素。 |
| 继承 | 无效 |
| 可动画的 | 是的。填充空间是有动画的。 |
| 版本 | CSS1 |
| DOM 语法 | object.Style.Padding =“30px”; |
CSS padding 属性值说明
| 值 | 描述 |
|---|---|
| length | 定义PX，PT，CM等中的填充。默认值为0。 |
| % | 在包含元素的％中设置填充。 |
| initial | 使属性使用其默认值。 |
| inherit | 从父母元素继承属性。 |
日期：2020-06-02 22:14:43 来源：oir作者：oir