最常踩的盒模型坑集中在padding和margin的误判：padding不能为负且背景色延伸至其区域；margin可为负但存在合并与传递现象；width/height默认不包含padding/border，需用box-sizing:border-box修正；行内元素上下padding/margin仅影响行框高度。
最常踩的盒模型坑，基本都出在对 padding 和 margin 的作用范围、计算逻辑和行为特性的误判上。不是写错了代码，而是没想清楚“它到底占不占位”“它往哪扩”“它跟谁打架”。
padding 不能为负，但新手总想“缩内容”
padding 是内容与边框之间的缓冲区，浏览器明确禁止负值（会直接忽略）。有人想用 padding: -10px 把文字“拉进边框里”，这是无效的。
- 背景色会延伸到 padding 区域，所以加 padding 不仅留白，还扩大了有颜色的区域
- 如果希望内容看起来更紧凑，该调
font-size、line-height或改display，而不是硬塞负 padding - 真正需要“收缩视觉空间”的场景，比如按钮内图标和文字靠得更近，用
margin调子元素间距更可控
margin 可以为负，但合并规则常被忽略
相邻块级元素的垂直 margin 会合并（collapse）：两个上下盒子分别设 margin-bottom: 20px 和 margin-top: 30px，实际间距只有 30px，不是 50px。
- 这种合并只发生在普通文档流中的块级盒子之间，flex/grid 容器内不发生
- 父元素没 border/padding 时，子元素的
margin-top会“穿出去”把整个父容器往下顶（叫 margin 传递），看起来像父元素动了 - 解决方式包括：给父元素加
border: 1px solid transparent、设overflow: hidden、或直接用 flex 布局替代
width/height 默认不管 padding 和 border，结果一加就超宽
这是最普遍的布局崩塌源头。比如父容器 width: 300px，子元素写 width: 100%; padding: 15px;，实际宽度变成 330px，溢出滚动条。
立即学习“前端免费学习笔记（深入）”；
- 默认是
box-sizing: content-box，width 只算内容区，padding 和 border 额外叠加 - 全局统一加一句
* { box-sizing: border-box; }，能让 width/height 真正代表“你看到的盒子总宽高” - 注意：border-box 下，设置
width: 200px; padding: 20px; border: 2px，内容区会自动压缩成 156px，不是“内容+padding+border=200”
行内元素的 padding/margin 行为很特别
像 、 这类行内元素，左右 padding/margin 正常生效，但上下 padding/border 会“撑高行框”，却不推开相邻行——导致视觉重叠或行高异常。
- 想让上下间距生效，得先改成
display: inline-block或display: inline-flex - 行内元素本身不响应
height，所以上下 padding 看似“没效果”，其实是改变了行框高度，影响的是整行排版 - 调试时用 DevTools 的盒模型高亮功能，一眼就能看出 padding 是否真的“起作用”了
