在css布局中，margin和padding都是控制元素间距的核心属性，二者分属盒模型的不同层级，协调使用才能实现精准的布局效果。margin用于控制元素与其他元素之间的外部间距，padding用于控制元素内容与元素边框之间的内部间距，理解二者的作用边界是协调使用的前提。
margin与padding的基础区别
从盒模型的层级来看，一个标准css盒模型从内到外依次是内容区、padding区、border区、margin区。二者的核心差异主要体现在作用对象和是否影响背景显示两个方面：
- 作用对象不同：padding是元素自身内部的间距，只会影响元素内容到自身边框的距离；margin是元素外部的间距，会影响当前元素与其他相邻元素的距离。
- 背景显示不同：padding区域的背景会和元素内容区的背景保持一致，属于元素自身的可视部分；margin区域不会显示元素的背景，是元素外部的透明空白区域。
- 合并规则不同：垂直方向的相邻元素margin会出现外边距合并现象，而padding不存在合并规则，设置多少就会生效多少。
协调使用的核心原则
实际开发中协调margin和padding可以遵循以下两个核心原则，避免盲目设置导致布局问题：
1. 按作用范围选择属性
如果是调整元素内部内容和边框的距离，优先使用padding；如果是调整元素和其他元素之间的间隔，优先使用margin。比如卡片内部文字和卡片边框的距离用padding，多个卡片之间的排列间隔用margin。
2. 避免不必要的重叠设置
不要同时给父子元素设置同方向的margin和padding实现同一个间距效果，这样会增加计算复杂度，也容易出现意外的间距叠加。比如父元素已经设置了padding-top，子元素就不需要再设置margin-top来实现同样的顶部间距。
常见布局场景的协调示例
场景一：列表项布局
实现一个横向排列的商品列表，列表项之间有固定间隔，列表项内部文字和边框有内边距，代码如下：
/* 列表容器样式 */
.goods-list {
display: flex;
/* 容器右侧留出margin的补偿，避免最后一个元素右侧多余间距 */
margin-right: -15px;
padding: 20px;
background-color: #f5f5f5;
}
/* 单个列表项样式 */
.goods-item {
width: 200px;
/* 列表项之间的外部间距用margin */
margin-right: 15px;
/* 列表项内部文字和边框的距离用padding */
padding: 15px;
background-color: #ffffff;
border-radius: 8px;
}
场景二：卡片内元素间距
实现一个信息卡片，卡片标题和描述文字之间有间距，卡片整体和其他内容有间隔，代码如下：
/* 卡片容器样式 */
.info-card {
/* 卡片和其他内容的外部间距用margin */
margin: 20px auto;
/* 卡片内部内容和边框的距离用padding */
padding: 25px;
width: 300px;
background-color: #ffffff;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
/* 标题样式 */
.card-title {
font-size: 18px;
font-weight: bold;
/* 标题和下方描述的间距用margin，因为是元素和其他元素的外部间距 */
margin-bottom: 12px;
}
/* 描述文字样式 */
.card-desc {
font-size: 14px;
color: #666666;
line-height: 1.5;
}
注意事项
使用margin和padding时还需要注意两个常见问题：
- 垂直方向相邻元素的margin会出现外边距合并，比如上方元素设置margin-bottom:20px，下方元素设置margin-top:15px，最终两个元素的间距是20px而不是35px，协调使用时需要提前计算这个规则，避免间距不符合预期。
- 行内元素的垂直方向padding和margin可能不会生效，比如<span>元素设置上下padding和margin不会改变行高，也不会影响其他行内元素的布局，这类场景需要把元素转为块级或者行内块级元素再设置对应属性。