padding在content-box下会增加实际宽度，因width仅指内容区，左右padding额外叠加；改用border-box后width包含padding，内容区自动压缩以保持总宽不变。
padding 在 content-box 下一定增加实际宽度
会，只要元素显式设置了 width（比如 width: 200px），且未修改盒模型，padding-left 和 padding-right 就会直接加到声明的宽度之外。浏览器按 box-sizing: content-box（默认值）解析，此时 width 只管内容区，左右 padding 各算一次，总宽 = width + padding-left + padding-right。
常见错误现象：
- 父容器
width: 100%，子元素width: 100%; padding: 16px;→ 水平溢出，出现横向滚动条 - Flex 项目设了
width: 200px，再加padding: 12px→ 实际占位变宽，挤占其他兄弟项空间 - 用
devtools查看 “Computed” 面板时，发现 Layout Width 明显大于你写的width值，且右上角标注为content-box
border-box 能让 padding 不撑宽，但必须生效
box-sizing: border-box 的作用是把 width 的含义从“内容宽”改为“边框盒总宽”，即包含内容 + 内边距 + 边框。你写 width: 200px; padding: 16px;，浏览器就真让整个元素占满 200px，内容区自动压缩成 168px（左右各减 16px）。
但容易踩的坑：
-
box-sizing不继承，只作用于当前元素 —— 即使父元素设了border-box，子元素仍默认content-box - 全局重置推荐写法：
* { box-sizing: border-box; }或更稳妥的*, *::before, *::after { box-sizing: border-box; } - 老项目中若已有浮动、绝对定位依赖
content-box计算，全局改可能引发布局偏移，建议先在局部组件测试
没写 width 的块级元素，padding 不改变总宽但会挤压内容
比如一个普通 <div> 没设 <code>width，只加 padding: 20px，它的总宽度仍等于父容器 content 宽度（通常就是 100% 减去 margin），不会“变宽”。但内容区会被自动压缩，腾出内边距空间。
注意两个例外：
- 只要写了
height（哪怕只是height: auto以外的任何值），上下padding就一定会撑高总高度 - 百分比
padding-top/padding-bottom的计算基准永远是父元素的width，不是height—— 这是 CSS 规范硬性规定，和盒模型无关，也绕不开
inline 元素的 vertical padding 不参与布局计算
display: inline 元素（如 <span></span>）设置 padding-top 或 padding-bottom，视觉上能看到内边距，但它不推高行高、不挤开邻近元素。也就是说，它“存在但不可见于布局流”。
这意味着：
- 不能靠
padding-top把一个span往上顶 —— 它只会覆盖上方内容或留白，不影响其他行内元素位置 - 如果需要垂直对齐或控制行间距，应该用
line-height、vertical-align，或者换为inline-block/flex - 这个行为与
box-sizing无关，border-box对 inline 元素的 vertical padding 也不起作用
真正容易被忽略的是：百分比 vertical padding 的计算基准永远是父容器 width，哪怕父容器高度固定为 100vh。这不是 bug，是规范强制行为，所有现代浏览器一致执行。想实现基于高度的等比内边距，只能用 padding-bottom + height: 0 + position: absolute 这类 hack，或者直接上 Flex/Grid 的 gap。
