填充定义元素边框与其内容之间的间距。CSS填充的指定方式与边距类似-它可以为每一侧单独设置，也可以一次为所有边设置。
在所有侧面设置相同的填充
此示例使用填充速记属性在元素的所有边上设置相同的填充。文章源自你的网络首码项目网-https://www.youranweb.com/268.html
<!DOCTYPE html>
<title>Example</title>
<style>
div {
background: gold;
padding: 20px;
}
div > p {
background: white;
}
</style>
<div>
<p>
所有四个边的填充 20 像素。
</p>
</div>设置每侧的填充
如果不希望对所有四条边应用相同的填充设置，或者希望每条边具有不同的填充，则可以使用以下属性：文章源自你的网络首码项目网-https://www.youranweb.com/268.html
填充顶部：padding-top文章源自你的网络首码项目网-https://www.youranweb.com/268.html
右填充：padding-right文章源自你的网络首码项目网-https://www.youranweb.com/268.html
填充底部：padding-bottom文章源自你的网络首码项目网-https://www.youranweb.com/268.html
左填充：padding-left文章源自你的网络首码项目网-https://www.youranweb.com/268.html
例：
<!DOCTYPE html>
<title>Example</title>
<style>
div {
background: gold;
padding-top: 5px;
padding-right: 60px;
padding-bottom: 15px;
padding-left: 30px;
}
div > p {
background: white;
}
</style>
<div>
<p>
每侧有不同的衬垫。
</p>
</div>速记属性
填充：padding属性是填充顶部：padding-top、右填充：padding-right、底部填充：padding-bottom和左填充：padding-left的简写。文章源自你的网络首码项目网-https://www.youranweb.com/268.html
<!DOCTYPE html>
<title>Example</title>
<style>
div {
background: gold;
margin: 20px;
padding: 5px 60px 15px 30px;
}
div > p {
background: white;
}
</style>
<div>
<p>
Different padding on each side.
</p>
</div>变化
同样，与边距一样，您不需要为所有四条边提供不同的值。可以提供一个、两个、三个或四个值。以下是它的工作原理：文章源自你的网络首码项目网-https://www.youranweb.com/268.html
如果只有一个值，则它适用于所有边。如果有两个值，则顶部和底部填充设置为第一个值，右填充和左填充设置为第二个值。如果有三个值，则顶部设置为第一个值，左侧和右侧设置为第二个值，底部设置为第三个值。如果有四个值，它们将分别应用于顶部、右侧、底部和左侧。文章源自你的网络首码项目网-https://www.youranweb.com/268.html
换句话说：文章源自你的网络首码项目网-https://www.youranweb.com/268.html
填充：10像素;文章源自你的网络首码项目网-https://www.youranweb.com/268.html
- 所有四条边都有 10 个像素的填充。
填充：10像素 20像素;文章源自你的网络首码项目网-https://www.youranweb.com/268.html
- 顶部和底部具有 10 像素的填充。
- 右和左的填充为 20 像素。
填充：10像素 20像素 30像素;文章源自你的网络首码项目网-https://www.youranweb.com/268.html
- 顶部是 10px
- 左边和右边是20px
- 底部为 30px
填充：10像素 20像素 30像素 40像素;文章源自你的网络首码项目网-https://www.youranweb.com/268.html
- 顶部是 10px
- 右边是20px
- 底部为 30px
- 左边是 40px
填充、边框和框模型
对元素应用填充（和边框）可能会影响该元素的大小。如果将元素设置为100像素宽，然后应用10像素的填充，则填充将把宽度增加到120像素。文章源自你的网络首码项目网-https://www.youranweb.com/268.html
这是因为默认的CSS框模型会向原始框大小添加填充和边框。它查看指定的宽度和高度，然后将任何边框和填充添加到该宽度和高度。文章源自你的网络首码项目网-https://www.youranweb.com/268.html
<!DOCTYPE html>
<title>Example</title>
<style>
div {
width: 150px;
height: 50px;
}
.padding {
padding: 20px;
background: gold;
}
.no-padding {
padding: 0;
background: limegreen;
}
</style>
<div class="padding">
填充
</div>
<div class="no-padding">
无填充
</div>这可能是违反直觉的，并导致许多问题，试图使布局正常工作。在处理百分比时尤其令人困惑。例如，您将元素的宽度设置为100%，但边框和/或填充会将其推出宽度超过100%，从而有效地破坏您的设计。文章源自你的网络首码项目网-https://www.youranweb.com/268.html
这整个问题可以通过使用box-sizing属性来克服。更具体地说，使用 。box-sizing: border-box文章源自你的网络首码项目网-https://www.youranweb.com/268.html
<!DOCTYPE html>
<title>Example</title>
<style>
div {
width: 150px;
height: 50px;
box-sizing: border-box;
}
.padding {
padding: 20px;
background: gold;
}
.no-padding {
padding: 0;
background: limegreen;
}
</style>
<div class="padding">
Padding
</div>
<div class="no-padding">
No padding
</div>这会将框保持在指定的宽度/高度，并在指定的高度和宽度内绘制边框和填充。文章源自你的网络首码项目网-https://www.youranweb.com/268.html
许多开发人员喜欢更改所有HTML元素和伪元素的框模型。这可能很有帮助，因为它使框模型在所有元素中保持一致。文章源自你的网络首码项目网-https://www.youranweb.com/268.html
您可以使用以下代码执行此操作。
*, *:before, *:after {
box-sizing: border-box;
}
评论