在CSS布局中，margin和padding都是用来控制元素间距的属性，但两者的作用逻辑和适用场景有本质区别，理解这些差异是做好页面布局的基础。
基本定义差异
margin指的是元素边框外部的间距，也就是元素和其他元素之间的距离，属于元素之外的空间。而padding指的是元素边框内部的间距，也就是元素内容和元素边框之间的距离，属于元素自身的内部空间。
我们可以通过CSS盒模型的结构来直观理解两者的位置：从内到外依次是content（内容）、padding（内边距）、border（边框）、margin（外边距）。
对元素尺寸的影响不同
在标准盒模型下，元素的宽度和高度默认只包含content的尺寸，此时padding和border的增加都会让元素的总尺寸变大，而margin不会影响元素自身的尺寸，只会影响元素和其他元素的相对位置。
如果设置了box-sizing: border-box，元素的宽度和高度会包含content、padding和border，此时padding的增加会压缩content的尺寸，元素总尺寸不变，margin依然不影响元素自身尺寸。
尺寸计算示例
以下是一个标准盒模型下的尺寸计算示例：
/* 标准盒模型，元素总宽度 = width + padding-left + padding-right + border-left + border-right + margin-left + margin-right */
.box {
width: 200px;
height: 100px;
padding: 20px;
border: 2px solid #333;
margin: 30px;
}
/* 此时元素自身总宽度（包含border）为 200 + 20*2 + 2*2 = 244px */
/* 元素占据的总水平空间为 244 + 30*2 = 304px */
背景覆盖范围的差异
元素的背景色或背景图会覆盖到padding区域，但不会覆盖margin区域。也就是说，给元素设置背景后，padding内部的空间会显示背景，而margin的外部空间不会显示该元素的背景。
我们可以通过下面的代码验证这个特性：
<div class="demo">测试内容</div>
.demo {
width: 100px;
height: 50px;
padding: 20px;
margin: 20px;
background-color: #f0f0f0;
border: 1px solid #ccc;
}
/* 灰色背景会覆盖内容和padding区域，margin区域是白色（父元素背景色） */
折叠规则不同
margin存在外边距折叠的特性，当两个垂直相邻的块级元素，上面的元素设置下margin，下面的元素设置上margin时，两者的间距不会相加，而是取较大的那个margin值。而padding不存在折叠问题，上下两个元素的padding会正常累加。
以下是margin折叠的示例：
<div class="top">上方元素</div> <div class="bottom">下方元素</div>
.top {
margin-bottom: 30px;
background-color: #e8f4ff;
}
.bottom {
margin-top: 20px;
background-color: #ffe8e8;
}
/* 两个元素之间的实际间距是30px，而不是30+20=50px */
使用场景区分
在实际开发中，我们可以通过以下原则选择使用margin还是padding：
- 如果需要调整元素和其他元素之间的距离，或者需要让元素相对父容器产生偏移，优先使用margin
- 如果需要调整元素内容和边框之间的距离，或者需要让背景色覆盖到内容和边框之间的区域，优先使用padding
- 如果是布局边缘的元素，避免使用margin导致页面出现不必要的滚动条，可优先使用padding调整内部间距
常见问题解答
行内元素的margin和padding有什么特殊表现？
行内元素（如<span>、<a>）的上下margin和上下padding不会影响行高，也不会把其他元素挤开，只有左右margin和左右padding会正常生效。如果需要行内元素的上下间距生效，可以将其设置为行内块元素display: inline-block。
margin可以设置负值吗？
margin支持设置负值，设置负margin可以让元素向反方向移动，甚至和其他元素重叠，这个特性常用来实现一些特殊的布局效果，比如多列等高布局。而padding不支持设置负值，最小只能是0。