margin 在垂直方向上的特性

父元素的第一个子元素如果设置了margin-top值，而父元素与第一个子元素之间没有其他属性或者元素隔开，就会发生折叠。

<div class="box">
    <p class="gr">hello world.</p>
</div>

.box {
    background: red;
    /* border: 1px solid red; */
    /* height: 100px; */  /* 无效 */
    /* padding-top: 1px; */ 
    /* padding-top: 0; */
    /* margin-top: 30px; */
}
.gr {
    margin-top: 20px;
    color: #fff;
    background: #ccc;
}

只有设置了border-top: 1px solid #ccc 或者 padding-top: 1px; 时，才会避免这种情况。

查看运行效果

margin在垂直方向上的重叠表现不止于此，只要2个元素的margin-top或者margin-bottom相邻，无论他们的关系是什么，都会发生折叠现象，具体的最准确的说法是两个或多个毗邻的普通流中的块元素垂直方向上的 margin 会折叠 其中的重点词为：

两个
相邻
普通流
块元素
垂直方向
margin-top, margin-bottom [缺一不可]

当两个值都为正时，取大值，当两个值一正一负，则相加, 当都为负时，取小值

在实际使用当中，我们应该尽量避免2个margin值在垂直方向上相邻，可采取的方式如下

想要和上方元素拉开距离，给上方元素添加margin-bottom值，或者给下方元素添加padding-top值
想要和父级顶部拉开距离，给父级添加padding-top值
想要和父级底部拉开距离，给父级底部添加padding-bottom值

当然，有很多方法可以避免折叠，很多文章也列出了发生折叠的特性等，很多文章也给出了计算折叠距离的详细方法，不过在实际情况中，折叠发生了会影响我们的开发效率，因此在垂直方向上避免2个margin值相邻，使用padding替代是最OK的方法。

关于margin在垂直方向上的表现详细说明

yangbo5207 / everyday

margin 在垂直方向上的特性 #12

margin 在垂直方向上的特性