内边距（padding）会撑开元素，根本原因在于CSS默认采用标准盒模型（content-box），此时width/height仅控制内容区尺寸，padding位于内容与边框之间并额外增加盒子总尺寸。
内边距（padding）会撑开元素，根本原因在于 CSS 默认采用的是 标准盒模型（content-box）。在这个模型下，width 和 height 属性只控制内容区（content）的尺寸，而 padding 是额外加在内容区“外面”、边框“里面”的一层空间——它不被包含在设置的宽高内，自然就会把整个盒子向外推。
padding 在盒模型中的位置和作用
从内到外，盒子结构是：content → padding → border → margin。padding 位于内容与边框之间，是透明的、可继承背景色的区域。它的存在意味着：
- 内容不再紧贴边框，视觉上更舒展
- 浏览器必须为这部分空白分配空间，因此盒子总尺寸 = 内容宽高 + padding + border + margin
- 即使没设 border，padding 依然占据物理空间，影响布局流
为什么“撑开”是默认行为？
因为 width/height 的语义就是“内容区域的大小”，不是“整个盒子的大小”。比如：
.box {
width: 200px;
height: 100px;
padding: 20px;
border: 2px solid #000;
}这个盒子实际占用的水平空间是：200px（内容）+ 40px（左右 padding）+ 4px（左右 border）= 244px。若父容器只有 200px 宽，它就会溢出。
立即学习“前端免费学习笔记（深入）”；
如何避免 padding 撑开？用 box-sizing 切换计算逻辑
想让 padding “向内压缩”而不是“向外撑开”，只需启用 IE 曾经的怪异模型（现为标准支持）：
-
box-sizing: border-box;—— 此时width和height表示的是“内容 + padding + border”的总尺寸 - 所有 padding 和 border 都在设定的宽高范围内“挤占”，不再额外增加盒子大小
- 推荐全局重置：
* { box-sizing: border-box; }，大幅降低尺寸计算负担
特别注意：行内元素的 padding 行为略有不同
对 span、a 这类行内元素：
- 水平方向（left/right）的 padding 会生效，并影响周围行内元素间距
- 垂直方向（top/bottom）的 padding 虽然渲染出来，但不会推开上下行的行高，可能造成文字重叠或遮挡
- 若需可靠控制高度，应将其转为
display: inline-block或block
