Question

css中一个div包含一个小div,如果外层的div不设border属性,里边的div上部会贴住外层div,为什么？

两个的效果差别就是我在div.bg中加了一个border:1px solid black;，
为什么我不加这个border , 里边的div设置的margin就不起作用？





Answer 1

　　这位网友你好，你遇到的是Margin垂直外边距合并问题，外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

　　垂直外边距合并问题常见于第一个子元素的margin-top会顶开父元素与父元素相邻元素的间距，而且只在标准浏览器下
(FirfFox、Chrome、Opera、Sarfi)产生问题，IE下反而表现良好。

　　这个问题发生的原因是根据规范，一个盒子如果没有上补白(padding-top)和上边框(border-top)，那么这个盒子的上边距会和其内部文档流中的第一个子元素的上边距重叠。

　　再说了白点就是：父元素的第一个子元素的上边距margin-top如果碰不到有效的border或者padding.就会不断一层一层的找自己
“领导”(父元素，祖先元素)的麻烦。只要给领导设置个有效的
border或者padding就可以有效的管制这个目无领导的margin防止它越级，假传圣旨，把自己的margin当领导的margin执行。

　　对于垂直外边距合并的解决方案上面已经解释了，为父元素例子中的middle元素增加一个border-top或者padding-top即可解决这个问题。

　　详细介绍你可以看一下下面我上传的文章，或者搜一下相关资料

追问

问题一：为什么是两个外边距的合并。我认为是一个父元素的内边距和一个子元素的外边距的合并。合并之后，应该是选外边距较大的啊。w3c是真么说的。
怎么会合并呢？
问题二：为什么我要专门设一个border，border不是默认是存在的吗？
难道设padding margin之前都要先设置border，不然就没办法用吗？

追答

　　http://blog.csdn.net/bingqingsuimeng/article/details/41892433

追问

不明觉厉