盒模型---外边距合并问题

盒模型—外边距合并问题

外边距合并（叠加）是指：当两个处置外边距相遇时，他们形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度较大者。

合并问题的前提是：处于普通流的两个或多个块元素垂直方向相遇加粗文字，会造成margin折叠，如果有边框（border）阻挡就不会发生折叠。

外边距会发生折叠的情况：

• 父元素的上外边距和第一个子元素的margin-top相遇
• 父元素的下外边距和最后一个子元素的margin-bottom相遇
• 相邻兄弟元素的一个的margin-bottom和一个的margin-top相遇
• 空元素，自己的margin-top和margin-bottom会相遇

注意：一般网站上会有默认的块元素的上、下外边距，所以如果你有一个空元素，没有为他设置外边距，将会默认使用网站的样式，这样实际你的空元素也占了空间。

如何组织外边距自动合并？

• 对于父子元素外边距合并
  我们可以在父元素的css样式中添加border属性或者overflow:hidden,但是添加border属性后父级元素的外观发生变化，不符合开发要求，因此我们一般采用overflow:hidden来解决这个问题。

• 对于相邻兄弟元素外边距合并
  我们可以分别给每一个元素加上一 个父级包裹层，然后给父级包裹层都加上overflow:hidden