CSS 中的 padding 属性用于控制元素内容与其边框之间的距离，即元素内边距。
它的主要作用是调整元素内部内容与边框之间上右下左的间距，以增加页面的美观性和布局灵活性。
好，那我们一起来看看吧。
padding 属性的四个边属性分别是：
来，代码演示下。
- <!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 个值：
好，来看看代码吧。
- <!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 时，实际上是在元素的内容区域周围添加了填充空间，这会影响元素的实际宽度。举例来说，如果你有一个宽高度为 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 对总宽度的影响。
湘公网安备 43102202000103号