Web前端基础知识（五）——margin外边距合并

如何计算margin

• 两个margin都是正值的时候，取两者的最大值；
• 当 margin 都是负值的时候，取的是其中绝对值较大的，然后，从0位置，负向位移；
• 当有正有负的时候，先取出负 margin 中绝对值中最大的，然后，和正 margin 值中最大的 margin 相加；
• 只有普通文档流中块框的垂直外边距才会发生外边距合并，行内框，浮动框或者绝对定位框之间的外边距不会发生合并。

父子元素的外边距合并

当一个div套在另一个div里的时候，两个div都会有margin的属性，必须在外层div添加border属性或者处理为不同的BFC，这样才不会出现外边距合并，如果不做处理，就会出现外边距合并现象。
对外层div设置以下属性可生成BFC：

float: left | right;
overflow: hidden | auto | scroll;
display: table-cell | table-caption | inline-block;
position: absolute | fixed;

ps: inline-block 是个例外，它既没有脱离文档流，但是它的所有的外边距都不会合并。

出现合并现象的父子元素
父亲盒子的外边距设置为10px；
孩子盒子的外边距设置为30px;
最后的外边距为两者中较大的那个，所以最终的外边距为30px;

没有出现合并现象的父子元素

兄弟元素的外边距合并

当两个div不存在嵌套关系时，两者始终会存在垂直方向上的外边距合并，外边距的值为两者中的最大值。
出现合并现象的兄弟元素

空元素的边距合并

空元素本身没有内容（即空元素）、内边距、边框时， 它的上下边距就相遇了， 即会产生叠加（垂直方向）。当为元素添加内容、 内边距、 边框任何一项， 就会取消叠加。