Question

CSS样式:竖直方向的两个元素的margin会重合吗?

刚学CSS,据说竖直方向的两个元素的margin:如下元素的margin-top和上元素的margin-bottom各为20px和10px,那么他们之间的边界距是20px吗?

Answer 1

会重合的。
例如：第一个div的margin{5px auto}；
下一个div的margin{5px auto};
那么两个div中间为5px；
如果第二个div为margin{20px auto}；
那么两个div之间为20px；以大的为准；
建议你能多实际练习一下，印象会更加深刻

Answer 2

对 垂直方向的margin重叠我们一般称叫下沉

也就是合并 以大的margin为准

还有就是水平方向的叠加

比如div1 margin-right:20px;

div2 margin-left:20px

那么div1和div2的水平间距就是40px 它们叠加了

明白吧 其实这不是主要问题

主要的还是浏览器间的差异最头疼~

再次bs下ie 呵呵 ie不随标准流

Answer 3

是的，垂直方向会重叠

Answer 4

垂直方向会重叠的！！水平方向不重叠~~

Answer 5

Vue实践-CSS样式position/display/float属性对比使用