17370845950

内边距（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