CSS 如何防止 padding 属性改变元素的宽度或高度

在本文中，我们将介绍如何使用 CSS 防止 padding 属性改变元素的宽度或高度的方法。padding 属性用于定义元素内容与元素边框之间的空白区域，通常会影响元素的尺寸。但有时候我们希望保持元素的尺寸不变，只改变其中的填充空白区域。

阅读更多：CSS 教程

使用 box-sizing 属性

box-sizing 属性可用于定义盒模型的尺寸计算方式，通过修改其取值，我们可以控制 padding 是否影响元素的宽度或高度。

border-box：将 padding 和 border 包含在元素的总宽度和总高度之内，不改变元素的尺寸。
content-box：元素的宽度和高度不包括 padding 和 border，此为默认值。

以下是示例代码：

.box {
  box-sizing: border-box;
  padding: 20px;
  width: 200px;
  height: 100px;
  background-color: lightblue;
  border: 1px solid black;
}

上述代码创建了一个具有 200px 宽度和 100px 高度的盒子，并设置了 20px 的 padding。由于我们将 box-sizing 属性设置为 border-box，padding 不会影响盒子的尺寸，所以最终盒子宽度仍为 200px，高度仍为 100px。

使用 calc() 函数

通过使用 calc() 函数，我们可以在定义元素宽度或高度时排除 padding 的影响。

以下是示例代码：

.box {
  width: calc(200px - 40px); /* 减去 padding 影响的像素值 */
  height: calc(100px - 40px);
  padding: 20px;
  background-color: lightblue;
  border: 1px solid black;
}

在上述代码中，我们使用 calc() 函数计算了元素的宽度和高度，将 padding 影响的像素值减去。由于计算结果排除了 padding 的影响，最终盒子的宽度为 200px，高度为 100px，与 padding 无关。

使用伪元素 ::before 和 ::after

我们还可以使用伪元素 ::before 和 ::after 来创建额外的层，用于呈现背景颜色和 padding，从而不改变实际元素的尺寸。

以下是示例代码：

.box {
  position: relative;
  width: 200px;
  height: 100px;
  border: 1px solid black;
}

.box::before {
  content: "";
  position: absolute;
  top: 20px;
  left: 20px;
  right: 20px;
  bottom: 20px;
  background-color: lightblue;
}

在上述代码中，我们创建了一个相对定位的盒子，并使用 ::before 伪元素来创建一个绝对定位的内部层。通过设置 top、left、right、bottom 属性来控制内部层的位置和大小，从而达到与 padding 相同的效果。最终盒子的宽度为 200px，高度为 100px，而 padding 则由内部层来呈现。

总结

本文介绍了如何防止 CSS 的 padding 属性改变元素的宽度或高度。通过使用 box-sizing 属性将 padding 和 border 包含在元素的总宽度和总高度之内，或者通过使用 calc() 函数排除 padding 的影响，或者使用伪元素来呈现 padding，我们可以实现在改变填充空白区域的同时保持元素尺寸不变的效果。

希望本文能够帮助你有效地运用 CSS 来控制元素的尺寸和填充空白区域。