、相邻模型盒子垂直外边距合并 - 塌陷
----
注意 : 仅在 垂直方向 上会出现 外边距合并 现象 , 水平方向 外边距 不会合并 ;
1、外边距塌陷现象说明
上下相邻 的 两个模型盒子 , 如果出现下面的情况...+ margin-top ,
而是 这两个边距 中的较大的值 , 即 max (margin-bottom , margin-top) ,
该现象称为 外边距 塌陷 , 如下图所示 :
推荐的解决方案...: 设置上下相邻的 模型盒子 时 , 只给一个设置 上下边距 , 不要都设置 ;
2、代码示例 - 塌陷效果
下面的示例中 , div1 设置了 下外边距 100 像素 , div2 设置了 上外边距...50 像素 , 最终两个 模型盒子 之间的间距 100 像素 , 取的是 两个外边距 中较大的值 ;
代码示例 :
距 合并的情况 ,
合并后的 上外边距为 二者之间 较大的值 ;
推荐解决方案 :
为 父元素 设置 边框 或 内边距 , 不要让 两个外边距 互相接触 ;
为 父元素 添加 overflow