默认 box-sizing 为 content-box，width/height 不含 padding 和 border，导致元素实际尺寸变大；改用 border-box 可解决，并建议全局设置 * { box-sizing: border-box; }。
为什么设置了 padding 元素却撑大了？
这是最典型的盒模型误解：默认情况下，box-sizing 是 content-box。此时元素的 width 和 height 仅指内容区尺寸，padding 和 border 会额外增加总宽高。比如设了 width: 200px; padding: 20px;，实际占用宽度是 240px（200 + 左右各20）。
解决办法就是把盒模型切到 border-box —— 宽高包含 padding 和 border，不再“意外溢出”。
- 所有新项目建议从全局重置开始：
* { box-sizing: border-box; } - 如果已有样式冲突，优先在具体组件或容器上显式设置：
.card { width: 300px; padding: 16px; box-sizing: border-box; /* 此时 300px 包含内边距 */ } - 注意：IE8+ 支持
box-sizing，但需加-webkit-和-moz-前缀（现代项目通常可忽略）
margin 还是不听使唤？先看是否塌陷
box-sizing 只管 padding 和 border，对 margin 无效。如果你发现上下相邻块级元素的 margin 没有叠加预期效果，大概率是发生了 外边距合并（margin collapse） —— 这是 CSS 规范行为，不是 bug。
- 常见场景：两个
div垂直堆叠，上方margin-bottom: 20px，下方margin-top: 30px，实际间距只有30px（取较大值） - 破除方式之一：给父容器加
overflow: hidden、padding: 0.1px或border: 1px solid transparent - 更可控的方式：改用
flex或grid布局，它们天然不触发外边距合并
要不要给所有元素都设 box-sizing: border-box？
要，而且越早越好。但要注意几个例外：
立即学习“前端免费学习笔记（深入）”；
-
<input type="search">等原生控件在某些浏览器中表现异常，可单独重置：input[type="search"] { -webkit-appearance: textfield; box-sizing: content-box; } - 第三方 UI 库（如 Ant Design、Element Plus）内部已处理好盒模型，全局重置后若出现尺寸错位，可针对性排除：
:not(.ant-btn) * { box-sizing: border-box; } - 动画中频繁修改
width/height时，border-box更稳定；但若依赖 JS 动态读取offsetWidth并做计算，需确认逻辑是否仍匹配（因为该值现在包含 padding）
内边距和外边距混用时的真实手感
真正让布局“混乱”的，往往不是单个属性，而是 padding 和 margin 在同一层级混用又没明确视觉锚点。比如一个卡片同时用 padding 控制文字留白、用 margin 控制卡片间距，但没统一基准（如都按 8px 倍数），很快就会失衡。
- 推荐建立间距系统：定义
--space-xs: 4px;、--space-sm: 8px;、--space-md: 16px;等 CSS 变量，然后只用这些值赋给padding或margin - 避免“一边用
padding一边用margin”去调同一个方向的距离——选其一，并保持语义清晰：padding是“自身呼吸感”，margin是“与邻居的距离” - 调试时打开浏览器开发者工具的“Layout”面板，勾选
Show box model，能直接看到每层尺寸是否符合预期
盒模型本身很简单，混乱来自叠加规则和缺乏约束。统一 box-sizing 是起点，但真正稳住布局的，是 padding/margin 的使用边界是否被团队共识守住。
