box-sizing 默认为 content-box,width/height 仅指内容区,实际宽高含 padding 和 border;应全局设为 border-box;margin 合并仅发生于常规流中相邻块级盒之间;padding 不能为负但 background-clip 可控背景绘制范围;border-width: 0 需配合 style 才生效。
浏览器默认把 width 和 height 解释为内容区域的尺寸,不包含 padding、border,更不包含 marg。这意味着写
inwidth: 200px; padding: 10px; border: 2px solid;,元素实际占位宽度是 200 + 10×2 + 2×2 = 224px —— 很容易撑破父容器或破坏栅格对齐。
解决办法是统一设为 box-sizing: border-box;,这样 width 就真指“边框边缘总宽”,padding 和 border 会向内压缩内容区。推荐在全局重置中加上:
* {
box-sizing: border-box;
}注意:* 选择器性能略低,生产环境可用 html { box-sizing: border-box; } + *, *::before, *::after { box-sizing: inherit; } 替代。
margin 合并(collapsing)常被误认为“bug”,其实是 CSS 规范明确定义的行为:相邻块级元素的垂直 margin 会取较大者,而不是相加。但这个规则有严格前提:
display: block)border/padding/inline content 隔开)flex、grid、float、position: absolute 容器内的子元素,margin 不会合并margin 也会合并成一个调试时如果发现 margin-top: 20px 没生效,先检查父元素有没有 padding-top 或 border-top —— 一旦存在,父子 margin 就不会合并,此时你的 margin 是真实起作用的;反之,没隔断就可能被“吞掉”了。
padding 值只接受 0 或正数,负值无效。但它直接影响背景绘制区域。默认 background-clip: border-box,即背景铺满到边框外沿;若改成 background-clip: content-box,背景就只画在内容区,padding 区域透明 —— 这在做内凹阴影、文字底色不延伸到内边距时很实用。
常见组合:
.card {
padding: 20px;
background-color: #f5f5f5;
background-clip: content-box; /* 背景不覆盖 padding 区 */
border: 1px solid #ddd;
}注意:background-clip 不影响 border 渲染位置,只裁剪背景;若同时用 background-origin,要小心两者的叠加效果。
border-width: 0 在大多数情况下等价于无边框,但有例外:当使用 border-style: solid 且 border-width: 0 时,部分旧版浏览器(如 IE8)仍会保留边框的“占位逻辑”。更稳妥的做法是直接省略 border-style,或显式设为 border: none。
另外,border 的三个组成部分(width、style、color)缺一不可才生效:border-width: 2px 单独写不会显示边框,因为缺少 style;border-color: red 单独写也不会,因为 style 默认是 none。
快速清边框的写法优先级:
border: none(推荐)border-left: 0 或 border-left: none
border: initial(重置为 UA 默认值,通常是 none)盒模型真正难的不是概念,而是各种属性在不同上下文中的隐式交互 —— 比如 overflow 对 padding 内容裁剪的影响,或者 transform 如何让元素脱离文档流从而改变 margin 行为。这些细节不查 MDN 很难靠经验覆盖全。