外边距margin的合并问题

在CSS中，两个相邻的盒子会存在“外边距margin合并”的现象：

1.margin合并的前提：

① 外边距合并只出现在两个紧紧相邻的盒子(父子关系或兄弟关系)，如果两个盒子间存在border或padding则无法合并；

② 外边距合并只发生在普通文档流中垂直方向上相邻的块级元素，而水平方向上的两个相邻的盒子则不会发生外边距合并。

2.两个盒子外边距合并后的实际边距：

① 两个盒子的margin均为正值，外边距合并后的实际边距为二者中较大的值；

② 两个盒子的margin均为负值，外边距合并后实际边距为二者中较小的值；

③ 两个盒子的margin一个为正值、一个为负值，外边距合并后实际边距为二者之和。

 

为了避免在使用盒子的外边距margin时出现合并现象，可以使用内边距padding代替(padding不存在合并现象)。