设置box-sizing为border-box后，padding会包含在元素总宽度内，不会影响布局。

小伙伴们对文章编程感兴趣吗？是否正在学习相关知识点？如果是，那么本文《CSS 设置 box-sizing 后 padding 如何生效？》，就很适合你，本篇文章讲解的知识点主要包括。在之后的文章中也会多多分享相关知识点，希望对大家的知识积累有所帮助！

不算。设置 box-sizing: border-box 后，padding 不再向外扩展元素总尺寸，而是向内压缩内容区，width 和 height 即为最终边框外沿尺寸。

box-sizing: border-box 后，padding 还算“额外加宽”吗？

不算。设置 box-sizing: border-box 后，padding 不再向外扩展元素总尺寸，而是向内压缩内容区——你写的 width 和 height 就是最终对外呈现的边框外沿尺寸。

比如：

div {
  width: 300px;
  padding: 20px;
  border: 2px solid #333;
  box-sizing: border-box;
}

为什么 content-box 下 padding 总是“撑破布局”？

因为它是浏览器默认模型：你声明的 width 和 height 只管内容区，padding 和 border 是纯加法项。哪怕只加 padding: 1px，总宽就+2px（左右各1px），极易导致：

• 栅格列总和超 100%，出现横向滚动条
• 卡片在 flex 容器中溢出父级，破坏对齐
• 百分比高度 + padding-top → 实际高度远超预期，推走下方元素

全局设置 * { box-sizing: border-box } 有哪些坑？

写法简单，但几个细节常被忽略：

• * 选择器性能略低，生产环境更推荐：

  html {
    box-sizing: border-box;
  }
  *, *::before, *::after {
    box-sizing: inherit;
  }

• 某些原生控件（如 input[type="search"] 在 Safari 中）对 border-box 渲染异常，必要时可单独重置：input[type="search"] { box-sizing: content-box; }
• box-sizing 不继承，所以伪元素 ::before/::after 必须显式包含在通配规则里，否则会回退到默认 content-box

调试时怎么确认 padding 是否被“算进去了”？

别猜，直接看开发者工具的 Computed 面板：

• 展开 width 或 height，查看 “computed value” —— 如果显示 300px，且旁边 Layout 面板中蓝色区域（content）明显窄于整体框，说明 border-box 生效了
• 若 computed width 是 344px（比如你写了 300px + padding: 20px + border: 2px），那大概率漏设了 box-sizing，或被更高优先级样式覆盖
• 注意：margin 在两种模型下行为完全一致，它永远“额外加在外面”，不受 box-sizing 影响

真正容易被忽略的，是垂直方向上的错觉：你盯着 width 加了 box-sizing 就放心了，却忘了 padding-top 同样会让元素变高、推走兄弟节点——只要还在 content-box 下，上下 padding 就永远在“偷偷加高”。

好了，本文到此结束，带大家了解了《设置box-sizing为border-box后，padding会包含在元素总宽度内，不会影响布局。》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！