使用margin总结

1.垂直外边距合并问题

当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

注意点：当一个盒子如果没有上内边距和上边框，那么这个盒子的上边距会和其内部文档流中的第一个子元素的上边距重叠。

解决方案：

1.使用父元素的padding来隔离与子元素之间的距离

2.设置父元素的overflow为hidden;

第一种方法比较好理解，但是第二种方法是什么鬼？

在W3C CSS2.1规范中有这样一个概念BFC（“块级格式化上下文”），就是页面上的一个隔离的渲染区域，容器里面的子元素不会再布局上影响到外面的元素。

BFC其实是页面中元素的一个隐藏属性，开启之后，元素将会具有以下特性：

1.元素的垂直外边距不会和子元素重叠

2.开启BFC的元素不会被浮动元素所覆盖

3.开启BFC的元素可以包含浮动元素

那么如何才能开启BFC呢？

float的值不为none

overflow的值不为visible

position的值不为relative和static

display的值为table-cell, table-caption, inline-block

2.行内元素与块级元素使用margin的区别

行内元素只能设置左右的margin,设置上下的margin无效

而块级元素可以任意设置上下左右的margin