1.当父元素嵌套子元素垂直排排列时,他们的margin-top就会取其中一个margin-top的最大值,导致父元素的整体下移
理想很美满,but现实很残酷。
<style>
*{margin: 0;padding: 0;}
#box1{width: 100px;height: 100px;background: gray;}
#box1 .box2{width: 20px;height: 20px;background: pink;margin-top: 30px;}
</style>
<body>
<div id="box1">
<div class="box2"></div>
</div>
</body>
这是上图的代码,可以看出在id名为box1内的子元素box2设置了margin-top属性,但是却依然整体一起下滑了。好吧,这种同甘共苦的精神我很欣赏,但是为了我的效果,你们还是gg吧。
有三种解决办法:
1.给父元素加一个边框;
2.给父元素加overflow:hidden;属性;
3.取消margin-top父元素适用padding-bottom
综上所述,再见了~
开个玩笑...在三种方法中第二种最为好用,不用多余添加border,也可以按照自己的想法适用margin。
2.当两个兄弟元素垂直排列时,上面的一个元素的margin-bottom与下一个元素的margin-top取值为两者中最大值。
额.....敢情这是W3C的语法标准,没什么好说的~goodnight