css之margin

以下的题目以及引申来源于今年4月份去美图面试时的一道问题。

题目：divA与divB设定都是width: 200px;height: 200px;margin: 50px;当他们分别是兄弟关系和父子关系时会是怎样的呈现？

先po下答案：

首先我们要明确最基本的margin的基准线，不知道基准线怎么找位置？！

top 以 containing block 的 content 上边或者垂直上方相连元素 margin 的下边为参考线垂直向下位移；
left 以 containing block 的 content 左边或者水平左方相连元素 margin 的右边为参考线水平向右位移。
right 以元素本身的 border 右边为参考线水平向右位移；

bottom 以元素本身的border 下边为参考线垂直向下位移。

当时答题竟然告诉考官兄弟组的样子长

怕不是要笑死人

两人根本不在一个水平方向上，怎么可能弟弟会以哥哥的左边为基准呢？！哥哥倒是在弟弟的垂直上方所以会以哥哥的底部为基准来定margin-top。

咦？那弟弟和哥哥岂不是应该隔着100px嘛

其实当时答题脑子一热根本没想到考官主要的意图：margin最大的坑是什么？重叠啊！

比如父子局中为啥不是酱子的捏？

这其中有两层重叠：第一层是父元素的盒子包含一个子元素盒子，给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值，而子元素和父元素的边距则没有发生变化。第二层是两个margin要比大小，真正显示的是大margin（不信你试试把子元素的margin改成30px，结果还是那个图）。

解决方法：

①一个盒子如果没有上补白(padding-top)和上边框(border-top)，那么这个盒子的上边距会和其内部文档流中的第一个子元素的上边距重叠。使父元素margin之内不只有这一个子元素，比如增加border、padding甚至可以再在内部加一个有高度的子元素。

②为父元素或者子元素声明浮动(float)、绝对定位(absolute)等脱离文档流的方式，div浮动之后的margin的计算，是按照与自己靠近的元素为基础的 。

比如：

蓝色div的margin-top基准线是他兄弟粉色div而不是他爹body（当然float:right治好了儿子红色div的边距重叠问题）

float还有一点要说的是他margin方向与其float方向一致，也就是float:left那margin-left的设置才起作用，float:right那margin-right的设置才起作用。

③display: inline-block

暂时总结这么多吧，应该会有后续（大概