你好，我是云桃桃。
一个希望帮助更多朋友快速入门 WEB 前端的程序媛。
云桃桃，大专生，一枚程序媛，感谢关注。回复 “前端基础题”，可免费获得前端基础 100 题汇总，回复 “前端工具”，可获取 Web 开发工具合集
269篇原创内容-gzh
后台回复“前端工具”可获取开发工具，持续更新中
后台回复“前端基础题”可得到前端基础100题汇总，持续更新中
后台回复“前端电子书”可获取20+本精选电子书
前言
CSS 中的 padding 属性用于控制元素内容与其边框之间的距离，即元素内边距。
它的主要作用是调整元素内部内容与边框之间上右下左的间距，以增加页面的美观性和布局灵活性。
好，那我们一起来看看吧。
Padding 基础
padding 属性的四个边属性分别是：
-
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" />
<title>Padding Example</title>
<style>
.box {
width: 200px;
height: 200px;
background-color: #f0f;
margin-bottom: 20px;
}
.example1 {
padding-top: 30px;
}
.example2 {
padding-right: 60px;
}
.example3 {
padding-bottom: 90px;
}
.example4 {
padding-left: 1000px;
}
</style>
</head>
<body>
<div class="box example1">Padding Top</div>
<div class="box example2">Padding Right</div>
<div class="box example3">Padding Bottom</div>
<div class="box example4">Padding Left</div>
</body>
</html>
效果如图。
注意，用开发者工具检查/点选第 1 个元素，高度也从 200 变成 230 了，这是为什么呢？这就是内边距，增加了自身的高度了。为什么增加了呢？能不能固定呢？在第 3 个大标题（重要：padding 对元素大小的影响）处会聊到。
padding 属性的属性值可以是以下类型：
1. 长度值：可以使用像素（px）、百分比（%）、em、rem 等长度单位来指定 padding 的大小。
2. inherit：继承父元素的 padding 值。
注意：负值在 padding 中是不允许的。
简写方法
为了简化 CSS 代码，提高代码的可读性和维护性，通过简写方法，可以将四个方向的 padding 值一次性设置来提高效率。
padding 简写的属性顺序是：padding-top、padding-right、padding-bottom、padding-left。
对于 padding 属性的简写，可以根据需要设置 1、2、3 或 4 个值：
-
一个值：表示所有四个方向的 padding 都使用相同的值。
-
两个值：第一个值表示上下方向的 padding，第二个值表示左右方向的 padding。
-
三个值：分别表示上、左右、下方向的 padding，这个不建议用，建议用4个值写法。
-
四个值：分别表示上、右、下、左方向的 padding。
好，来看看代码吧。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Padding案例</title>
<style>
.box1 {
width: 200px;
height: 100px;
background-color: lightblue;
padding: 30px; /* 一个值，所有方向都使用30px的padding */
}
.box2 {
width: 200px;
height: 100px;
background-color: lightcoral;
padding: 20px 40px; /* 两个值，上下20px，左右40px的padding */
}
.box3 {
width: 200px;
height: 100px;
background-color: lightgreen;
padding: 10px 20px 30px; /* 三个值，上10px，左右20px，下30px的padding */
}
.box4 {
width: 200px;
height: 100px;
background-color: lightskyblue;
padding: 5px 10px 15px 20px; /* 四个值，上5px，右10px，下15px，左20px的padding */
}
</style>
</head>
<body>
<div class="box1">一个值：所有方向都使用30px的padding</div>
<div class="box2">两个值：上下20px，左右40px的padding</div>
<div class="box3">三个值：上10px，左右20px，下30px的padding</div>
<div class="box4">四个值：上5px，右10px，下15px，左20px的padding</div>
</body>
</html>
重要！padding 对元素大小的影响
当你设置元素的 padding 时，实际上是在元素的内容区域周围添加了填充空间，这会影响元素的实际宽度。举例来说，如果你有一个宽高度为 200px*200px 的盒子，并且为其设置了 20px 的 左右 padding，30px 的上下 padding，则元素的总宽度会变为 240px（200px + 20px + 20px）,总高度变为 260px（200px + 30px + 30px）。
换句话说，padding 的添加会增加元素的宽度，因为填充空间会占据外部边框之外的空间。
这一点在设计布局时尤为重要，因为要考虑到 padding 对元素尺寸的影响。
那要解决 padding 对元素宽度的影响，确保元素的宽度固定，怎么做呢？可以采取以下 2 种方法：
1. 盒子模型： 使用盒子模型中的 box-sizing 属性来控制元素的盒子模型。通过设置 box-sizing: border-box;，可以让元素的宽度包括 padding 和 border，而不会影响元素的实际宽度。这样，即使添加了 padding，元素的内容区域仍然保持固定的宽度。
仍然拿第一个案例中的第一个元素举例子。
.box {
width: 200px;
height: 200px;
background-color: #f0f;
margin-bottom: 20px;
box-sizing: border-box;
}
效果，就回归 200px 啦。
2. 计算实际宽度： 如果不使用 box-sizing: border-box;，而是采用默认的 content-box，则需要手动计算实际的宽度，包括 padding 在内。例如，如果想要一个总宽度为 240px 的元素，并且设置了 20px 的 padding，则元素的内容区域宽度应为 200px。
.box {
width: 200px; /* 总宽度变成200 */
padding: 20px;
}
选择哪种方法取决于你的布局需求。使用 box-sizing: border-box; 更加方便和直观，因为它使得元素的宽度属性直接控制内容区域的宽度，而无需手动计算 padding 对总宽度的影响。
ok，本文完。更多前端系列内容可以go公众.h：云桃桃
推荐阅读：
846
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
