padding默认会让元素变大，因content-box模型下width/height仅指内容区，padding和border额外增加；改用box-sizing:border-box可使宽高包含padding和border，推荐全局设置*{box-sizing:border-box}。
padding 默认会让元素变大，这是标准盒模型的必然行为
是的，padding 会直接影响元素在页面中实际占据的宽高——但前提是没改过 box-sizing。默认情况下，CSS 使用的是 content-box 模型，此时你写的 width: 200px 和 height: 100px 仅代表内容区域大小，所有 padding（以及 border）都会额外加在它外面。
常见错误现象：
- 给一个
width: 300px的卡片加了padding: 20px，结果它撑破了父容器、触发横向滚动条 - Flex 容器里多个等宽子项，加了
padding后突然换行——因为总宽度超出了容器 - 用
%设置高度再加padding-top，发现实际高度远超预期
box-sizing: border-box 是控制 padding 不“撑大”元素的关键开关
设置 box-sizing: border-box 后，width 和 height 就变成“最终对外呈现的尺寸”，padding 和 border 全部被包进去，内容区自动收缩腾空间。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 全局统一加这一句，避免到处手动计算：
* { box-sizing: border-box; } - 注意：这个规则对
margin无效——margin始终不参与元素自身尺寸计算，只影响布局间距 - 如果某个组件必须用
content-box（比如某些第三方 UI 库内部逻辑），记得显式重置：box-sizing: content-box
padding 对高度的影响比宽度更隐蔽，尤其在固定高容器中
水平方向上，开发者常会留意宽度是否溢出；但垂直方向容易忽略：padding-top 和 padding-bottom 同样会叠加进总高度，且在 content-box 下不会被截断或隐藏——它会直接把盒子往下顶，可能推走下方元素，甚至撑开父容器。
典型场景：
- 一个
height: 60px的导航栏，加了padding: 16px 0，结果实际占高 92px（60 + 16×2） - 使用
display: flex; align-items: center垂直居中时，若子元素有上下padding，却忘了它已占用空间，导致视觉偏移 - 表格单元格（
td）默认无box-sizing: border-box，加padding后容易破坏行高一致性
不要靠“减 width/height 补偿 padding”，而要靠盒模型统一管理
有人会写 width: calc(200px - 40px) 来抵消左右 padding: 20px，这看似可行，但极易出错：
- 响应式中
padding改为百分比或rem，calc()就难维护 - 不同设备下
padding值变化时，所有相关width都得同步改 - 一旦加了
border，又要再减一遍，逻辑迅速失控
真正稳健的做法只有一个：从项目初始化就启用 box-sizing: border-box，让所有尺寸声明都指“最终可见大小”。这不是妥协，而是把复杂度收口到一个可控的配置点上。
最容易被忽略的一点：iframe、video、canvas 等替换元素（replaced elements）默认不继承 box-sizing，需要单独设置才能和普通块级元素行为一致。
