前端三剑客
CSS

CSS padding（填充）

# CSS Padding（填充）

# 1. Padding（填充）

当元素的 padding（填充）内边距被清除时，所释放的区域将会受到元素背景颜色的填充。padding 属性可以单独改变上下左右的填充。

# 2. 可能的值

length：指定固定的填充长度，可以是 px, pt, cm, em 等单位。
%：填充的百分比，基于包含块的宽度计算。
inherit：规定应该从父元素继承 padding 属性的值。

# 3. Padding - 单边内边距属性

在CSS中，可以为不同的侧面指定不同的填充：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title>
<style>
p {
    background-color: yellow; /* 设置背景颜色为黄色 */
}
p.padding {
    padding-top: 25px;    /* 上内边距为 25px */
    padding-bottom: 25px; /* 下内边距为 25px */
    padding-right: 50px;  /* 右内边距为 50px */
    padding-left: 50px;   /* 左内边距为 50px */
}
</style>
</head>
<body>
<p>这是一个没有指定填充边距的段落。</p>
<p class="padding">这是一个指定填充边距的段落。</p>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

上内边距是 25px
右内边距是 50px
下内边距是 25px
左内边距是 50px

# 4. Padding - 简写属性

为了缩短代码，可以在一个属性中指定所有填充属性。这就是所谓的简写属性。所有的填充属性的简写属性是 padding :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title>
<style>
p {
    background-color: yellow; /* 设置背景颜色为黄色 */
}
p.padding {
    padding: 25px 50px; /* 上下填充为25px，左右填充为50px */
}
</style>
</head>
<body>
<p>这是一个没有指定填充边距的段落。</p>
<p class="padding">这是一个指定填充边距的段落。</p>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

padding 属性可以有一到四个值：

padding: 25px 50px 75px 100px;
- 上填充为25px
- 右填充为50px
- 下填充为75px
- 左填充为100px
padding: 25px 50px 75px;
- 上填充为25px
- 左右填充为50px
- 下填充为75px
padding: 25px 50px;
- 上下填充为25px
- 左右填充为50px
padding: 25px;
- 所有的填充都是25px

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title>
<style>
p {
    background-color: yellow; /* 设置背景颜色为黄色 */
}
p.padding1 {
    padding: 25px 50px 75px 100px; /* 四个方向的填充不同 */
}
p.padding2 {
    padding: 25px 50px 75px; /* 上、左/右、下 */
}
p.padding3 {
    padding: 25px 50px; /* 上/下、左/右 */
}
p.padding4 {
    padding: 25px; /* 四个方向的填充相同 */
}
</style>
</head>
<body>
<p class="padding1">四个方向的填充不同。</p>
<p class="padding2">上、左右、下。</p>
<p class="padding3">上下、左右。</p>
<p class="padding4">四个方向的填充相同。</p>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

# 5. 注意事项

padding 属性的值不能为负。
使用百分比值时，填充基于元素的宽度计算。
padding 会影响元素的总宽度和总高度。

# 6. Padding 和 Border 的关系

padding 位于内容和边框之间，因此设置 padding 会扩大元素的整体尺寸：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title>
<style>
div {
    width: 300px; /* 元素宽度 */
    border: 5px solid black; /* 边框 */
    padding: 50px; /* 填充 */
    background-color: lightblue; /* 背景颜色 */
}
</style>
</head>
<body>
<div>这个 div 元素有 50px 的填充。</div>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# 7. 所有的CSS填充属性

通过对 padding 属性的掌握，你可以更灵活地控制元素的内边距，使页面布局更加美观和整齐。

编辑此页

上次更新: 2025/01/25, 22:32:05

← CSS margin(外边距) CSS 长宽高样式设置→