子元素的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会合并

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

margin的坑
这里记录布局中遇到的各种坑子元素的margin 样式为mui-content的div充满整个屏幕,样式为titl...
margin-top的坑
下面有一段代码HTML部分 CSS部分就会出现问题如图原本打算是让form与顶部有5px的间距，但是不但没有出...
深入理解css中的margin负值！
margin属性在实际中非常常用，也是平时踩坑较多的地方。margin折叠部分相信不少人都因为这样那样的原因中过招...
关于margin的小小总结
margin就是元素的外边距，大家都很熟悉他的用法啦，我要说的是平时在工作中用到margin时遇到的坑！大多数页...
盒模型相关知识点总结
1 . 盒模型包括的属性 margin:外边距：包含margin-top、margin-right、margin-...
css学习之margin属性
margin margin 清除周围的（外边框）元素区域。margin 没有背景颜色，是完全透明的。 margin...
CSS外边距
Margin margin清除周围的元素（外边框）的区域。margin没有背景颜色，是完全透明的margin可以单...
CSS笔记
margin叠加盒子模型的相邻元素、父子元素的垂直方向上的margin会产生margin塌陷，具体的margin...
html css
1.margin 塌陷，与margin合并 margin合并不解决，直接设置一个box的margin即可 marg...
web开发（4）-- 传说的盒模型之margin
margin的使用 margin的叠压现象 margin的子债父偿现象 margin的使用先来看下代码和效果： ...