在CSS布局中，盒模型是控制元素尺寸和间距的核心概念，margin和padding作为盒模型的重要组成部分，会直接影响元素的最终宽度计算，不同的盒模型模式下的计算规则存在明显差异。
盒模型的基本组成
CSS盒模型将每个元素看作一个矩形的盒子，由内到外依次包含内容区域（content）、内边距（padding）、边框（border）、外边距（margin）四个部分。其中内容区域是元素显示文本、图片等内容的区域，padding是内容和边框之间的空白区域，border是包裹内容和padding的边框线，margin是元素和其他元素之间的空白区域。
标准盒模型下的宽度计算
标准盒模型是CSS的默认盒模型模式，通过box-sizing: content-box可以显式声明，该模式下设置的width属性仅代表内容区域的宽度，元素的总宽度需要加上padding、border和margin。
标准盒模型下元素总宽度的计算公式为：
总宽度 = width + padding-left + padding-right + border-left-width + border-right-width + margin-left + margin-right
下面通过一个示例来演示标准盒模型下的宽度计算：
/* 标准盒模型示例 */
.box {
box-sizing: content-box; /* 默认值，可省略 */
width: 200px;
padding: 20px;
border: 2px solid #333;
margin: 10px;
}
上述代码中，元素的width为200px，左右padding各20px，左右border各2px，左右margin各10px，那么元素的总宽度为：200 + 20*2 + 2*2 + 10*2 = 264px，而内容区域宽度仍然是设置的200px。
IE盒模型下的宽度计算
IE盒模型也叫替代盒模型，通过box-sizing: border-box声明，该模式下设置的width属性代表元素内容区域、padding和border三者的总宽度，padding和border会向内挤压内容区域的宽度，不会增加元素的总宽度。
IE盒模型下元素总宽度的计算公式为：
总宽度 = width + margin-left + margin-right
内容区域宽度的计算公式为：
内容区域宽度 = width - padding-left - padding-right - border-left-width - border-right-width
同样用上面的属性值演示IE盒模型的计算：
/* IE盒模型示例 */
.box {
box-sizing: border-box;
width: 200px;
padding: 20px;
border: 2px solid #333;
margin: 10px;
}
此时元素的总宽度为：200 + 10*2 = 220px，内容区域宽度为：200 - 20*2 - 2*2 = 156px，padding和border的宽度都包含在设置的200px width内，不会额外增加元素的总宽度。
margin和padding的差异对比
margin和padding都会增加元素占据的外部空间，但两者的作用区域和影响范围不同，具体差异如下：
| 属性 | 作用区域 | 是否计入元素总宽度 | 是否影响内容区域宽度 |
|---|---|---|---|
| padding | 元素内部，内容和边框之间 | 标准盒模型计入，IE盒模型不计入 | 两种模式下都会挤压内容区域宽度 |
| margin | 元素外部，和其他元素之间 | 两种模式下都计入元素占据的总空间，但不计入元素自身总宽度 | 两种模式下都不影响内容区域宽度 |
实际开发中的注意事项
- 全局设置
box-sizing: border-box可以减少布局时的宽度计算复杂度，很多前端重置样式都会添加该规则，示例代码如下：
/* 全局设置IE盒模型 */
*,
*::before,
*::after {
box-sizing: border-box;
}
- margin存在外边距合并的问题，垂直方向相邻的元素margin会取较大的那个值，不会简单相加，计算布局空间时需要注意这个特性。
- padding不能为负值，而margin可以设置负值，负值margin会减少元素占据的空间，可能会让元素和其他元素重叠，使用时需要谨慎。
总结
margin和padding对盒模型宽度计算的影响核心取决于当前使用的盒模型模式。标准盒模型下padding和border会增加元素总宽度，挤压内容区域；IE盒模型下padding和border包含在width内，不会增加总宽度，只会挤压内容区域。margin在两种模式下都不会影响元素自身的总宽度，只会影响元素和其他元素之间的间距。掌握这些规则能帮助开发者更高效地完成页面布局，避免尺寸计算错误导致的布局问题。