这里记录布局中遇到的各种坑

子元素的margin

    <div class="mui-content">
        <div class="title">轮播图</div>
    </div>

样式为mui-content的div充满整个屏幕,样式为title的div紧贴着最上方
类似于这样的效果

<style lang="scss" scoped>
.mui-content {
    height: calc(100vh - 0.44rem);
    background-color: blue;
    .title {
        font-size: 0.16rem;
        color: #333;
        padding: 0.13rem 0.15rem;
        background-color: red;
    }
}
</style>

完美,达到了我的目的.
但是如果我将padding改为margin的时候

.title的margin-top居然无视父元素把整个屏幕撑开了,并且出现了滚动条.
wtf ???
这是什么原因呢?
原来是相邻的块元素的margin会合并

敲黑板,重点! 垂直相邻外边距会合并.