margin是盒模型中的外边距，主要表示两个盒模型边框之间的距离。
先来看看水平方向的情况：
例如：两个盒模型A和B,当它们水平方向排列时（A在左边，B在右边）。此时给A一个margin-right：10px；给B一个margin-left：15px；
这时，AB之间的外边距为25px（只需将两个数值相加即可），这个是我们通常很好理解的。
接下来我们看看垂直方向的情况：
例如：AB垂直排列（A在上面，B在下面）。此刻给A一个margin-bottom：10px，给B一个margin-top：15px；由于时垂直方向上的margin会产生重叠，10px与15px发生重叠以后，AB之间的的外边距为15px（两个数都为正值，则取大的那个值），这个就是通常说的margin垂直方向重叠。
还有一种情况，ABC三个元素，C是B的子元素，此时三个元素豆没有设置边框值（border），内边距值（padding）的情况下。
A和B元素依然垂直方向排列，当给A一个margin-bottom：10px；B所有margin值为0，此时，AB之间的外边距为10px。
这时设置C的外边距margin-top：15px；（目的是想要C在B元素内，距离B元素的上边框15px），此时会出现的情况为，C与B的上边框紧挨着，B与A之间的距离变为15px。
这时，C的margin冲破了B元素边框，其margin值就等同于其父级B元素的margin值。
值得注意的是，如果要解除这种情况，第一，设置B元素的边框值，第二，在B元素设置overflow：hidden；两种情况可以是其达到预期效果，即AB之间外边距10px，C离B上边框10px。
