上面margin-top为什么和上面div黏在一起？

Question

最外层底是灰色的，两个div是白色的上面边距都是margin-top:15px;但是第一个明明是margin但是效果和padding一样粘一起了，想不到通...请巨佬指点

.content {
        height: 100vh;
        background-color: $uni-bg-color-grey;
        .brick{
            margin:30rpx 0 0 0;
            padding: 0 40rpx;
            background-color: $uni-bg-color;
        }
    }

Answer 1

属于 margin-top 高度塌陷，针对你这里解决方法 给最外层.content加一个 padding-top:15px;， .brick第一个不给margin就行， 就可以解决。

怎么解决 margin-top塌陷？

对于 margin-top 的塌陷问题，可以从以下几点去解决，亲测有效：

1. 给父元素增加边框
   为了不影响原先的图像效果，可以将边框颜色设置为白色（与浏览器背景颜色一致）
2. 溢出隐藏
   在父元素的style里面添加overflow：hidden；
3. 利用浮动
   给父元素的style添加浮动，但是这种方法不推荐使用。因为会带来未知的错误
4. 给父元素添加 position:fixed;
   这里用到了定位的知识，将父元素显示在固定位置，就不会受margin-top塌陷的问题影响
5. 给父元素设置 display：table;

6. 使用伪元素
   伪元素之所以被称为伪元素，就是因为他们不是真正的页面元素，html没有与之对应的元素，但是其用法和表现行为和真正的元素一样，所以被成为伪元素。

   .clearfix::before {
    content: '';
    display: table;
   }