content-box盒模型下，width/height仅指内容区尺寸，总宽度=width+左右padding+左右border。

因为 CSS 默认使用 content-box 盒模型，padding 会额外增加元素的总宽度和高度，而不是从设定的宽高里“扣除”。

content-box 是怎么算尺寸的？

当你写：
width: 200px; padding: 20px;
浏览器实际渲染的**总宽度 = width（200px） + 左右 padding（40px） = 240px**。
同理，height 也会因上下 padding 而变高。这个“额外撑开”的效果，就是布局错位的根源。

为什么看起来“乱了”？

常见于以下场景：

• 多个并排元素设了相同 width，但有的加了 padding，有的没加 → 宽度不一致，换行或溢出
• 父容器定宽（如 100% 或 800px），子元素 width: 100% + padding → 实际超宽，触发横向滚动或挤压其他元素
• 用 flex 或 grid 布局时，padding 改变了项目的“占用空间”，影响对齐和分配逻辑

怎么解决？两种主流方式

① 切换盒模型：box-sizing: border-box
加在需要控制的元素上（推荐全局设置）：

这样 width/height 就包含 content + padding + border，padding 不再“撑大”元素。

② 手动减去 padding（不推荐）
比如：
width: calc(200px - 40px); padding: 20px;
容易出错、难维护，尤其响应式中 padding 可能是 rem/em/%，计算更复杂。

小提醒：border 和 margin 的区别

margin 不参与盒模型尺寸计算，它只是外部间距，不影响 width/height；
border 在 content-box 下和 padding 一样会额外增加尺寸，但在 border-box 下会被包含进 width/height 里。