理解 CSS 内边距（Padding）的概念及其在盒模型中与外边距（Margin）的区别。
掌握 padding-top、padding-right、padding-bottom、padding-left 四个独立属性的用法。
熟练运用 padding 简写属性的四种取值规则（1 值、2 值、3 值、4 值）。
学会使用像素（px）、百分比（%）及 inherit 关键字设置内边距。
能够通过调整内边距优化内容的可读性和视觉平衡。
CSS 内边距（Padding）用于在元素的内容（Content）与元素的边框（Border）之间创建空间。它只影响元素内部，不会改变元素与其他相邻元素之间的距离。
核心区别：
内边距 (Padding)：内容与边框之间的空间（内部）。
外边距 (Margin)：边框与相邻元素边框之间的空间（外部）。
独立属性设置
CSS 允许我们单独控制元素四个方向的内边距：
可用单位：
长度单位：如 px, cm, pt, em, rem 等。
百分比 (%)：相对于父元素宽度的百分比。
inherit：从父元素继承内边距值。
以下代码展示了如何为 div 的每个边单独设置不同的内边距：
<!DOCTYPE html>
<html>
<head>
<title>独立内边距示例</title>
<style>
body {
margin: 0;
padding: 20px;
font-family: sans-serif;
}
.myDiv {
background-color: lightblue;
border: 2px solid black;
/* 单独设置每个方向的内边距 */
padding-top: 80px; /* 上方 80px */
padding-right: 100px; /* 右侧 100px */
padding-bottom: 50px; /* 下方 50px */
padding-left: 80px; /* 左侧 80px */
}
.inner {
background-color: pink;
border: 1px solid black;
width: 70px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
}
</style>
</head>
<body>
<div class="myDiv">
<div class="inner">内容块</div>
</div>
<p>注意粉色内容块与蓝色容器边框之间的巨大间距差异。</p>
</body>
</html>为了简化代码，CSS 提供了 padding 简写属性，允许在一行声明中设置所有四个方向的内边距。根据提供的值的数量，其行为分为四种情况。
如果只提供一个值，该值将应用于所有四个方向（上、右、下、左）。
语法：
padding: 值;示例：
/* 上下左右均为 20px */
padding: 20px;演示代码：
<style>
.box-one {
background-color: gray;
border: 2px solid black;
padding: 20px; /* 四边均为 20px */
color: white;
text-align: center;
}
</style>
<div class="box-one">四周留白均匀 (20px)</div>如果提供两个值：
第一个值：应用于 上 和 下。
第二个值：应用于 左 和 右。
语法：
padding: 上下 左右;示例：
/* 上下 10px，左右 20px */
padding: 10px 20px;演示代码：
<style>
.box-two {
background-color: gray;
border: 2px solid black;
padding: 10px 20px;
color: white;
text-align: center;
}
</style>
<div class="box-two">上下 10px，左右 20px</div>如果提供三个值：
第一个值：应用于 上。
第二个值：应用于 左 和 右。
第三个值：应用于 下。
语法：
padding: 上 左右 下;示例：
/* 上 10px，左右 20px，下 30px */
padding: 10px 20px 30px;演示代码：
<style>
.box-three {
background-color: yellowgreen;
border: 2px solid black;
padding: 10px 20px 30px;
color: white;
text-align: center;
}
</style>
<div class="box-three">上 10px，左右 20px，下 30px</div>如果提供四个值，顺序遵循顺时针方向：
上 (Top)
右 (Right)
下 (Bottom)
左 (Left)
语法：
padding: 上 右 下 左;示例：
/* 上 10px，右 20px，下 15px，左 25px */
padding: 10px 20px 15px 25px;演示代码：
<style>
.box-four {
background-color: cyan;
border: 2px solid black;
padding: 10px 20px 15px 25px;
color: black;
text-align: center;
font-weight: bold;
}
</style>
<div class="box-four">上 10 / 右 20 / 下 15 / 左 25</div>结合独立属性和简写属性，CSS 中共有 5 个主要的内边距相关属性：
内部空间：内边距是内容与边框之间的区域，背景色会延伸至此区域。
顺时针记忆法：在使用 4 个值的简写时，牢记 上 -> 右 -> 下 -> 左 的顺时针顺序。
简写逻辑：
1 值：全同。
2 值：上下 / 左右。
3 值：上 / 左右 / 下。
4 值：上 / 右 / 下 / 左。
百分比陷阱：当使用百分比（%）设置 padding 时，无论是水平还是垂直方向，其计算基准通常都是父元素的宽度。
布局影响：增加内边距会增加元素的总宽度（在默认 box-sizing: content-box 下），需注意对布局的影响。
如果我想要一个元素上下内边距为 15px，左右内边距为 30px，应该如何使用简写属性 padding？
在 CSS 盒模型中，如果我将 padding 设置为 10%，这个 10% 是相对于谁的宽度或高度计算的？
为什么有时候我们在按钮设计中 prefer 使用 padding 而不是固定宽度的 width 来控制按钮大小？这样做有什么好处？