box-sizing: content-box 是 padding 撑大容器的根源，非 bug 而是规范行为：width/height 仅指内容区，padding 和 border 额外叠加，如 width: 200px; padding: 15px; 实际宽为 230px；inline 元素垂直 padding 不影响布局；box-sizing: border-box 可解决，但需确保生效且无其他样式干扰。
box-sizing: content-box 是 padding 撑大容器的根源
不是 bug，是规范行为：浏览器默认所有元素都带 box-sizing: content-box，此时你写的 width 和 height 只管内容区，padding 和 border 都额外加在外面。比如 width: 200px; padding: 15px;，实际占位宽度就是 200 + 15 + 15 = 230px。
这个计算逻辑对块级元素、替换元素（如 img、input）都生效；但对 display: inline 元素，垂直方向的 padding 不参与布局计算——它“看起来有”，但不会推高行高或挤开邻近元素。
哪些场景下 padding 明明写了却没撑大？
两种情况会让 padding “隐身”：
- 元素没设
width（比如普通div），水平方向加padding不会改变总宽——内容区自动收缩腾出空间 - 用了
box-sizing: border-box，且声明已生效（注意：它不继承，需显式设置或通过通配符覆盖）
但要注意：即使没写 width，只要写了 height，上下 padding 仍会撑高；而百分比 height 在非 flex/grid 容器中往往失效，此时 padding-top/bottom 的计算基准仍是父容器的 width，不是 height。
为什么加了 box-sizing: border-box 还在变大？
常见误判点不是 box-sizing 失效，而是其他样式干扰：
-
margin虽不参与盒模型尺寸计算，但会扩大元素整体占据的空间（尤其在 flex 容器中，margin会挤压相邻项目） - 父容器设置了
min-width或flex-basis，子元素无法按border-box规则压缩内容区 -
font-size、line-height或vertical-align导致基线偏移，视觉上像被撑高 - 元素是
display: inline-block，HTML 中的空白字符产生不可见间隙，叠加padding后更明显
调试时直接看开发者工具「Computed」面板里的 box-sizing、width、padding-left 等值，再对照底部「Box Model」图示——如果 padding 已生效但内容区宽度没减少，说明 box-sizing 没覆盖到该元素。
全局重置 box-sizing 的坑
用 * { box-sizing: border-box; } 看似一劳永逸，但要注意：
- 它对
table、select等部分原生表单控件可能影响默认渲染（尤其是老版 Safari） - 某些依赖精确内容区尺寸的场景（如 Canvas 容器、SVG viewBox 对齐）会出问题
- IE8+ 支持无前缀，但 Android ≤4.3 需补
-webkit-box-sizing - 伪元素
::before/::after也得一起重置，否则它们仍走content-box
真正容易被忽略的是：当你在某个组件里局部改了 box-sizing，又嵌套了第三方 UI 库（比如 Ant Design 或 Bootstrap），它们的 CSS 优先级可能覆盖你的规则——这时候得加 !important 或提高选择器 specificity。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
