box-sizing: border-box 使 width/height 包含 padding 和 border，解决溢出问题；background 默认绘至 border-box；inline 元素上下 padding 不影响行高。
box-sizing: border-box 是什么，为什么它能解决 padding/border 溢出问题
默认情况下，width 和 height 只控制 content 区域大小，padding 和 border 会额外撑开元素——这导致你设了 width: 200px，加上 padding: 10px 和 border: 2px 后，实际占位变成 224px。很多布局错位、响应式断点失效都源于此。
用 box-sizing: border-box 就能让 width 和 height 包含 padding 和 border，真正按你写的尺寸渲染可视区域：
div {
width: 200px;
padding: 10px;
border: 2px solid #333;
box-sizing: border-box; /* 关键：200px 现在是总宽 */
}注意：IE8+ 支持，但需确保没有触发 Quirks Mode；全局重置时建议加 * { box-sizing: border-box; }，但要排除 input[type="search"] 等原生控件（它们在某些浏览器中对 border-box 表现异常）。
padding 和 border 对 background 绘制范围的影响
background-color 和 background-image 默认铺满 border-box 区域（即 content + padding + border），但仅当 border 是实线且非透明时，视觉上才“看到”背景延伸到边框内侧；若用了 border-style: dashed 或 border-color: transparent，背景会透出，容易误判绘制边界。
立即学习“前端免费学习笔记（深入）”；
-
background-clip决定背景绘制的上限：默认border-box，可设为padding-box（不画进 border 下）或content-box（只画 content 区） -
background-origin决定背景图定位起点：默认padding-box，设为content-box时，background-position: 0 0会让图片左上角对齐 content 左上角，而非 padding 左上角 - 如果用
border-radius，圆角会同时裁剪background和border，但不会裁剪box-shadow（除非显式用overflow: hidden）
用 calc() 配合 padding/border 做精确内容区留白
当必须保留 box-sizing: content-box（比如对接遗留系统或第三方组件），又想让 content 区严格等于某个值，就得手动从 width 中减去 padding 和 border：
div {
width: calc(100% - 20px - 4px); /* 100% 减去左右 padding 各 10px，左右 border 各 2px */
padding: 10px;
border: 2px solid #ccc;
box-sizing: content-box;
}注意：calc() 内部运算符两侧必须有空格，否则解析失败；单位混用（如 calc(100px - 1em)）在多数现代浏览器支持，但旧版 Safari 对 em 在 calc 中的支持不稳定，建议统一用 rem 或视口单位。
更安全的做法是：用 max-width + min-width 组合兜底，防止 calc 计算结果为负值导致布局崩溃。
border-width 为 0 时是否还占空间？padding 是否影响 inline 元素
border-width: 0 等价于没边框，不占渲染空间；但 border: none 或 border: 0 才彻底移除边框样式，而 border-width: 0 若搭配 border-style: solid，部分浏览器仍可能保留微小渲染占位（极少见，但曾在旧版 Firefox 中复现过）。
对 display: inline 元素（如 span），padding 会水平生效（左右 padding 正常撑开），但垂直方向（上下 padding）不影响行高，也不会把行框顶开——它只是在元素自身视觉区域上加了空白，可能覆盖相邻文字，但不会改变 layout flow。
所以给 inline 元素调上下 padding，通常是为了视觉修饰（如高亮底色上浮），而不是为了控制行间距；真要调行间距离，请用 line-height 或改用 inline-block。
