如何通过调整CSS内边距控制元素尺寸以优化布局？

本文共计931个文字，预计阅读时间需要4分钟。

在默认情况下，`padding` 是加在 `width` 和 `height` 之外的。例如，设置 `width: 200px; padding: 20px;`，实际占用水平空间是 240px（200 + 20 + 20）。这常常导致布局错位或容器溢出。

解决方法是统一加：

*, *::before, *::after { box-sizing: border-box; }这样 padding 就会从设定的 width 内部“扣减”，200px 宽度包含内边距，更符合直觉。

• 不加 box-sizing: border-box 时，响应式布局中容易因 padding 突然撑破父容器
• box-sizing: content-box（默认）适合需要精确控制内容区尺寸的场景，比如 Canvas 或 SVG 容器
• 老项目升级时，全局改 box-sizing 可能影响已有浮动/定位逻辑，建议先局部测试

padding 的四个方向值会影响子元素的相对定位基准

padding 不仅改变自身尺寸，还移动了内部子元素的“起始坐标”。例如一个 position: relative 的子元素，其 top: 0 是相对于父元素 content box 的上边缘；而父元素若有 padding-top: 30px，子元素就会被整体下推 30px。