1.当父元素嵌套子元素垂直排排列时，他们的margin-top就会取其中一个margin-top的最大值，导致父元素的整体下移
。
<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
749
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
