关于margin与padding的区别及设置padding后盒子宽度变化的技术咨询

嘿，我完全懂你现在的困扰！明明知道padding是用来增加元素内部文本和边框的间距，但设置后盒子整体宽度却变了，这确实容易让人懵。其实问题出在CSS盒模型的默认行为上，我给你拆解清楚：

为什么设置padding后盒子宽度会变？ #

默认情况下，浏览器使用的是标准盒模型：你给元素设置的width和height只代表「内容区域」的尺寸，而padding（内边距）和border（边框）是额外加到这个尺寸外面的。举个例子：

/* 初始代码 */
.your-box {
  width: 200px;
  border: 1px solid #333;
}

这时候盒子总宽度是200px（内容） + 1px*2（左右边框）= 202px。当你加上padding: 5px;后，总宽度就变成了200px + 5px*2（左右内边距） + 1px*2（左右边框）= 212px——这就是你看到盒子变宽的原因。

怎么解决？用box-sizing: border-box #

想要让padding不改变盒子的整体宽度，只需要给元素加上box-sizing: border-box;属性。这个属性会让浏览器切换到怪异盒模型（IE盒模型）：此时你设置的width和height会包含内容区、内边距和边框的总尺寸。修改后的代码：

.your-box {
  width: 200px;
  border: 1px solid #333;
  padding: 5px;
  box-sizing: border-box; /* 关键属性 */
}

现在盒子的总宽度会保持你设置的200px，padding会从内容区域的空间里扣除，刚好实现文本和边框之间的间距，同时盒子整体尺寸不变，完美解决你的需求！

再补一句关于margin和padding的场景差异 #

你提到知道二者区别，但刚好在这个场景里再明确下：你要的是「文本和边框内部的间距」，所以用padding是完全正确的；而margin是用来控制盒子和其他元素之间的外部间距，和这个场景无关~

内容的提问来源于stack exchange，提问作者ferdi_