高级前端开发必会的 4 个内边距 Padding 小技巧～

Padding 定义了内容区域边缘与元素边框之间的空间。这个空间可以增加内容的可读性，并能影响元素的大小。

让我们通过几个具体的示例来进一步了解内边距的常用技巧。

示例 1：单边内边距

<div class="single-padding">这是左侧有内边距的文本。</div>

<style>
.single-padding {
    padding-left: 30px;
}
</style>

在这个例子中，.single-padding 类仅为元素的左侧设置了 30px 的内边距。这意味着文本内容和元素左侧边框之间将有 30px 的空间。

示例 2：分别设置四个方向的内边距

<div class="different-padding">这是四周内边距不同的文本。</div>

<style>
.different-padding {
    padding: 10px 20px 30px 40px;
 }
</style>

在这个例子中，.different-padding 类为元素的上、右、下、左四个方向分别设置了不同的内边距值。

示例 3：使用百分比值设置内边距

<div class="percentage-padding">这是使用百分比内边距的文本。</div>

<style>
.percentage-padding {
    width: 50%;
    padding: 5%;
}
</style>

在这个例子中，.percentage-padding 类为元素设置了宽度为父元素宽度的 50%，同时所有四个方向的内边距都设置为 5% 的百分比值。

这意味着内边距的大小将随着父元素宽度的变化而动态调整。

示例 4：内边距与盒子总尺寸的关系

<div class="padding-box-size">这是内边距影响盒子尺寸的文本。</div>

<style>
.padding-box-size {
    width: 200px;
    padding: 20px;
    box-sizing: border-box;
}
</style>

在这个例子中，.padding-box-size 类设置了一个 200px 宽的盒子，并且四周都有 20px 的内边距。

由于使用了 box-sizing: border-box;，盒子的总宽度仍然是 200px，内边距被包含在内，而不会额外增加盒子的实际宽度。

<div class="padding-box-size">这是内边距影响盒子尺寸的文本。</div>

<style>
.padding-box-size {
    width: 200px;
    padding: 20px;

}
</style>

这个例子中，box-sizing 使用了默认值，width 仅针对内容区域有效，内边距会在此基础上继续增加盒子宽度，最终盒子宽度变成了 200px + 20px(左侧内边距) + 20px (右侧内边距) = 240px。