Css Margin合并问题

来源：互联网发布：java 调用指定浏览器编辑：程序博客网时间：2024/06/11 12:34

Margin合并分为两种情况第一种比较简单好理解就是指垂直方向上两个相邻div。如下

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title>测试margin</title>    <style>        #test{          width:50px;          height: 50px;            margin: 50px;            background: blue;        }        #test1{            width:50px;            height: 50px;            margin: 50px;            background: red;        }    </style></head><body><div id="test"></div><div id="test1"></div></body></html>

第一个和第二个的margin是相等值的情况出现如图情况，那么上下的margin不相等的情况是什么呢？看图由此可以得出一个结论：当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

下面我们再看第二中就是父子div并且假设没有内边距或边框把外边距分隔开这种情况

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title>测试margin</title>    <style>        #test{          width:50px;          height: 50px;            margin: 50px;            background: blue;        }        #test1{            width:50px;            height: 50px;            margin: 30px;            background: red;        }    </style></head><body><div id="test">    <div id="test1"></div></div></body></html>

效果如下这个你会发现出现了意想不到的现象，两个的顶部到了一块。这个问题的原因是因为：根据规范，一个盒子如果没有上补白(padding-top)和上边框(border-top)，那么这个盒子的上边距会和其内部文档流中的第一个子元素的上边距重叠。简单的说就是：父元素的第一个子元素的上边距margin-top如果碰不到有效的border或者padding.就会不断一层一层的找自己“领导”(父元素，祖先元素)。还有个问题就是父子div离body的距离是由他们中较大的margin-top值决定的。

0 0