QD1-P32 CSS 边框属性（3）padding（元素的内边距）

本节学习：CSS padding属性（元素的内边距）

---

本节视频

https://www.bilibili.com/video/BV1n64y1U7oj?p=32

---

‍

padding 属性的用途

---

​​

‍

在CSS中，padding​ 属性用于设置元素内部的空间，即在元素内容和其边界（border）之间添加空间。这可以增加元素的可读性，也可以用来调整布局。

‍

‍

padding 属性的基本用法

---

单一值

设置一个值时，应用到四个方向的内边距：

padding: 10px; /* 上右下左都是10px */

‍

两个值

设置两个值时，元素顶部和底部内边距为第一个值，左右内边距为第二个值：

padding: 10px 20px; /* 顶部和底部是10px，左右是20px */

‍

三个值

设置三个值时，顶部内边距为第一个值，左右内边距为第二个值，底部内边距为第三个值：

padding: 10px 20px 30px; /* 顶部是10px，左右是20px，底部是30px */

‍

四个值

设置四个值时，上右下左，按顺时针应用：

padding: 10px 20px 30px 40px; /* 顶部是10px，右侧是20px，底部是30px，左侧是40px */

‍

‍

---

单个方向的padding属性

也可以单独设置某个方向的内边距：

• ​padding-top​
• ​padding-right​
• ​padding-bottom​
• ​padding-left​

例如：

padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;

‍

百分比值

​padding​ 属性也可以使用百分比来设置，这个百分比是相对于元素的宽度（而不是高度）计算的：

padding: 5%; /* 所有方向的内边距都是元素宽度的5% */

‍

‍

注意事项

---

• ​padding​ 属性不可为负值。
• ​padding​ 会影响元素的布局，因为它增加了元素的实际尺寸。
• 在一些框模型（如 box-sizing: border-box;​）中，padding​ 不会影响元素的总宽度和高度，因为它是从已设定的宽度和高度中减去的
• 使用 padding​ 时，要考虑到它对页面布局的整体影响，特别是在响应式设计中。

建议少用内边距padding​。

‍