元素尺寸异常主因是box-sizing未统一为border-box，导致content-box下padding/border额外增加；其次margin合并、单位混用、定位基准缺失及Flex/Grid中margin行为变化共同引发布局混乱。
元素尺寸总比预想的大？先看 box-sizing 是否被重置
默认情况下，div 等块级元素使用 content-box 盒模型：设置 width: 200px 时，padding 和 border 会额外加在内容区之外，导致实际占用宽度变成 200px + padding-left + padding-right + border-width。很多 UI 框架（如 Bootstrap）或重置样式（如 * { box-sizing: border-box; }）会全局切换为 border-box，但若局部遗漏或覆盖，就会出现“明明设了 200px 却撑出 240px”的混乱。
- 用浏览器开发者工具选中元素，检查 computed 样式中的
box-sizing值，确认是content-box还是border-box - 统一推荐在 CSS 开头添加：
* { box-sizing: border-box; } *:before, *:after { box-sizing: border-box; } - 注意：某些第三方组件库可能强制设回
content-box，需针对性覆盖，例如：.third-party-card { box-sizing: border-box !important; }
margin 合并（collapsing）导致空白消失或加倍
垂直方向的相邻块级元素（如连续的 p、div）的上下 margin 会合并为一个，取其中较大者；父元素没有 border 或 padding 时，子元素的上/下 margin 还可能“溢出”到父容器外——这会让布局看起来“没间距”或“间距过大”，实则不是没生效，而是被合并了。
- 触发
margin合并的典型场景：div直接嵌套h2+p，两者都有margin-top - 快速验证：给父容器加
padding: 1px或border: 1px solid transparent，若空白恢复正常，大概率是 margin 合并 - 规避方式：
overflow: hidden、display: flow-root（推荐）、或改用padding替代部分margin
响应式中 padding/margin 单位混用引发错位
当同时使用 rem、em、%、px 甚至 vh 设置内边距和外边距时，缩放或视口变化会导致比例失衡。例如：padding: 1rem 随根字体变化，而 margin: 20px 固定，小屏下可能 padding 显得过小、margin 显得突兀。
- 优先保持单位一致：整站用
rem（配合font-size媒体查询），或全用%/vw做流体控制 - 慎用
em做padding：它继承父元素font-size，嵌套深时易失控；rem更可预测 -
绝对定位元素的
top/right/bottom/left若依赖margin对齐，务必确认其父容器是否设置了position: relative，否则基准错乱
Flex/Grid 容器中 margin 行为与传统布局不同
在 display: flex 或 grid 容器里，子项的 margin 不再触发传统 collapsing，且 auto margin 可用于对齐（如 margin-left: auto 推向右侧）。但这也意味着旧有基于 float + margin 的经验可能失效，比如期望用 margin: 0 auto 居中 flex 子项时，若未设 width，它会占满主轴，auto margin 就无效。
立即学习“前端免费学习笔记（深入）”；
- Flex 子项水平居中：更可靠的是
justify-content: center（容器上），而非依赖子项margin - Grid 中避免对网格项设
margin来控制间隙，改用gap属性（row-gap/column-gap），它不参与盒模型计算，更稳定 - Flex 容器的
align-items与子项margin-top/bottom共存时，后者可能被忽略——因为主轴对齐由容器控制，子项自身 margin 在交叉轴上不起作用
实际排版混乱往往不是单一属性写错，而是 box-sizing 基准不一致、margin 合并未预期、单位混杂叠加响应式缩放、以及新布局模式下仍套用旧习惯这几层因素叠在一起。调试时从 computed 样式逐层向上查父容器的 box-sizing 和 display 类型，比反复调 padding 数值更有效。
