1.上下margin传递（子传父）
系统默认是你想给父元素设置。
1.1 margin-top传递
一个大盒子里面有一个小盒子，想让小盒子向下移动100px，这时候如果给小盒子设置margin-top=50的话，就会出现上下margin传递。
image.png
给红色小盒子设置margin-top之后
image.png
发现大盒子向下移动了50px，小盒子相对于大盒子的位置没有变化。这个就是上下margin传递。但是左右是不会传递的。
image.png
<div class="father">
<div class="son"></div>
</div>
<style>
.father{
height: 200px;
width: 200px;
background-color: green;
}
.son{
height: 100px;
width: 100px;
background-color: red;
margin-left: 50px;
}
</style>
1.2margin-bottom传递
很少见。必须在特殊情况下才会传递。
父盒子的高度是由儿子的高度撑起来的，也就是给父盒子高度设置auto，或者不给父亲设置高度（因为height默认值就是auto）。
image.png
.father{
/* height: auto; */
width: 200px;
background-color: green;
}
.son{
height: 100px;
width: 100px;
background-color: red;
margin-bottom: 50px;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
<div>hahahahaahhh</div>
</body>
1.3总结
◼ margin-top传递
如果块级元素的顶部线和父元素的顶部线重叠，那么这个块级元素的margin-top值会传递给父元素
◼ margin-bottom传递
如果块级元素的底部线和父元素的底部线重叠，并且父元素的高度是auto，那么这个块级元素的margin-bottom值会传递给父元素
◼ 如何防止出现传递问题？
给父元素设置padding-top\padding-bottom
给父元素设置border border：1px solid transparent这种不好，还是会占据距离。
触发BFC: 设置overflow为auto
2.上下margin的折叠（兄弟折叠，父子折叠）
◼ 垂直方向上相邻的2个margin（margin-top、margin-bottom）有可能会合并为1个margin，这种现象叫做collapse（折叠）
◼ 水平方向上的margin（margin-left、margin-right）永远不会collapse
◼ 折叠后最终值的计算规则
两个值进行比较，取较大的值
◼ 如何防止margin collapse？ 只设置其中一个元素的margin
image.png
设置大盒子里面小盒子的位置，最好给大盒子使用padding，而不是给小盒子使用margin。
Margin是元素和元素之间的距离，是给兄弟元素设置的。
Padding是内容和边框的距离，是给父子设置的。
网友评论