padding会增加元素总宽度，而margin仅影响外部间距；2. 使用box-sizing: border-box可使width包含padding和border，避免布局溢出；3. 推荐全局设置box-sizing: border-box以提升布局稳定性。
在CSS盒模型中，元素的总宽度受
margin和
padding的影响，但它们的作用方式不同。理解这一点对准确控制布局至关重要。
盒模型的基本组成
一个HTML元素的实际占用空间由四部分构成：
-
内容宽度（width）：设置的
width
值 - 内边距（padding）：内容与边框之间的空间
- 边框（border）：元素的边框线
- 外边距（margin）：元素与其他元素之间的空白
其中，
padding和
border会增加元素的实际占用宽度，而
margin只影响与其他元素的间距，不参与元素自身的宽高计算。
padding如何影响盒模型宽度
默认情况下，CSS使用
box-sizing: content-box，此时设置的
width仅代表内容区域的宽度。
立即学习“前端免费学习笔记（深入）”；
例如：
div {width: 200px;
padding: 10px;
border: 2px solid #000;
}
该div的总宽度为：
200px（内容） + 2×10px（左右padding） + 2×2px（左右border） = 224px
可见，
padding直接增加了元素的整体宽度。
若改为
box-sizing: border-box，则设置的
width包含内容、padding和border： div {
width: 200px;
padding: 10px;
border: 2px solid #000;
box-sizing: border-box;
}
此时内容区域会被压缩，总宽度仍为200px，内部可用空间为：200 - 20 - 4 = 176px。
margin不影响元素自身宽度
margin用于控制元素与其他元素之间的距离，它不参与元素宽高的计算。
继续上面的例子：
div {width: 200px;
padding: 10px;
border: 2px solid #000;
margin: 20px;
}
该元素的自身总宽度仍是224px（content + padding + border），但它在页面中占据的整体空间会从其边界向外再延伸20px。
在文档流中，这个margin会影响相邻元素的位置，但不会改变该div的盒模型尺寸。
实际布局中的建议
为了避免因padding导致布局溢出或错位，推荐统一设置：
* {box-sizing: border-box;
}
这样，无论添加多少padding或border，只要width固定，元素的总宽度就不会变化，更利于响应式设计和精确布局。
基本上就这些。掌握
padding会扩展元素尺寸，而
margin只影响外部间距，是写出稳定布局的基础。
