上查看所有课程
CSS 的 padding 属性控制元素的内容与其边框之间的空间。例如，
h1 {
border: 4px solid black;
padding: 20px;
}浏览器输出
这里，内容（由绿色表示）和边框之间的空间是内边距（padding）。
padding 属性与 margin 属性不同。padding 属性在元素内部增加额外空间，而 margin 属性在元素周围增加额外空间。
CSS padding 语法
padding 属性的语法如下：
padding: length | percentage | inherit;这里，
length：以长度单位定义内边距，例如px、pt、em等。percentage：以百分比（%）定义内边距。inherit：继承父元素的值。
padding 属性不接受负值。
示例：CSS padding 属性
让我们看一个 padding 属性的例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS padding</title>
</head>
<body>
<p class="first">This paragraph has a padding of 15px.</p>
<p class="second">This paragraph has a padding of 30px.</p>
</body>
</html>p.first {
/* add a 20px padding */
padding: 20px;
}
p.second {
/* add a 40px padding */
padding: 40px;
}
p {
border: 4px solid black;
background-color: greenyellow;
/* clips the background color to content only */
background-clip: content-box;
}浏览器输出
上面的例子展示了使用 px 单位的各种 padding 值的用法。
不建议对内边距使用百分比单位。百分比单位是相对单位，父元素宽度的变化会导致内边距尺寸发生意外变化。
注意：background-clip 属性仅使用 content-box 值向元素的 `content` 添加背景颜色。我们用它来可视化内边距。
你可以了解有关 background-clip 的信息。
CSS padding 的构成属性
padding 属性包含以下 CSS 属性，用于为元素的各个侧面添加内边距。
padding-top：为顶部添加内边距。padding-right：为右侧添加内边距。padding-bottom：为底部添加内边距。padding-left：为左侧添加内边距。
让我们看一个例子，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS padding</title>
</head>
<body>
<p>
This paragraph has a padding of 30px at the top, 80px at the right,
40px at the bottom, and 20px at the left.
</p>
</body>
</html>p {
border: 4px solid black;
padding-top: 30px;
padding-right: 80px;
padding-bottom: 40px;
padding-left: 20px;
background-color: greenyellow;
/* clips the background color to content only */
background-clip: content-box;
}浏览器输出
CSS padding 作为简写属性
padding 属性可用作简写属性，用于指定元素一个到四个侧面的内边距。
padding 属性可以有：
- 一个值：应用于所有四个侧面。
- 两个值：分别应用于顶部/底部和左侧/右侧。
- 三个值：分别应用于顶部、左侧/右侧和底部。
- 四个值：分别应用于顶部、右侧、底部和左侧。
让我们看一个例子，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS padding</title>
</head>
<body>
<p class="one-value">
This paragraph has a padding of 30px on all sides.
</p>
<p class="two-value">
This paragraph has a padding of 10px at the top/bottom and 40px at
the left/right sides.
</p>
<p class="three-value">
This paragraph has a padding of 10px at the top, 80px at the
left/right, and 5px at the bottom.
</p>
<p class="four-value">
This paragraph has a padding of 40px at the top, 15px at the right,
5px at the bottom, and 30px at the left.
</p>
</body>
</html>p.one-value {
/* applies to all sides */
padding: 30px;
}
p.two-value {
/* adds 15px to top/bottom and 40px to left/right */
padding: 10px 40px;
}
p.three-value {
/* adds 10px to top, 60px to left/right, 5px to bottom */
padding: 10px 80px 5px;
}
p.four-value {
padding: 40px 15px 5px 30px;
}
p {
/* add border of solid 4px */
border: 4px solid black;
background-color: greenyellow;
/* clips the background color to content only */
background-clip: content-box;
}浏览器输出
注意：默认情况下，padding 值不包含在元素的 width 和 height 中。添加 padding 值会改变实际的 width 和 height，从而导致意外的布局。
可以使用 box-sizing 属性解决此问题。