1.外边距合并：只有在垂直方向上会发生
例：子margin-top > 父margin-top
*{ margin: 0; padding: 0; } .parent{ width: 20px; height: 20px; background-color: red; margin-top: 10px; } .children{ width: 10px; height: 10px; background-color: green; margin-top: 20px; }
<div class="parent"> <div class="children"></div> </div>
效果图：
2.在布局中的应用
margin：通常用来设置此元素与相邻元素或父元素边框的距离（盒子与 盒子之间的距离）
padding：通常用来设置内容显示的区域
另：通常子元素的margin可以用父元素的padding代替，以此减少不必要的嵌套
原文：https://www.cnblogs.com/zgdawdl/p/9898966.html