问一个CSS中margin属性相关的假设性问题，想研究一下里面的原理。
假设，HTML代码如下：
<html><link rel="stylesheet" type="text/css" href="css.css"/><body><div class="b"><div><p class="a">weweewrfsfdgdfsgdgfdsgsdfsgsdfgsdgsdgsdgsdgsdf</p></div></div></body></html>
CSS代码如下：
.a{color:red;padding:10px;border-width: 0px;border-style:solid;border-color:green;margin:50px;background-color:blue;}.b{border-width: 1px;border-style:solid;border-color:yellow;background-color:black;}
应该能看出，我做了两层的DIV，里面那层我用了50PX的margin，我们知道margin本身是透明的，不带颜色的，为了能证明浏览器能识别它的存在，所以我外面套了一个DIV，设置了背景色。
问题就出在这里，外面的DIV（就是class="b"里的）必须要同时设定border属性（属性值还不能是0），才能将里面div的区域完全显示出来，如果不加，那么就不能显示出全部背景，只能显示左右的背景色。
详细的内容，我都用这张图片来展示了，请懂的朋友来分析下这是为什么，谢谢。
请楼主百度一下margin collapse即(margin折叠)，我在这里简单描述一下margin collapse的原理：normal flow(普通流式布局)中两个垂直方向上相邻的block-level(块级)元素会产生margin collapse。具体可访问：http://bbs.csdn.net/topics/340188875
温馨提示：答案为网友推荐，仅供参考
第1个回答 2013-08-07
我想是这样的，如果你不加边框，margin还是存在的，但是他是透明的，所以是一条，其实margin有，你没有看到
有了边框，而且还是实线的边框，又要保证a的四边离b50px 的距离，就必须把默认的撑大，主要是实线边框，
不要纠结这些问题啊，你直接给个hright就完事了
有了边框，而且还是实线的边框，又要保证a的四边离b50px 的距离，就必须把默认的撑大，主要是实线边框，
不要纠结这些问题啊，你直接给个hright就完事了
第2个回答 2013-08-07
在Firefox，IE8这两个浏览器中，有两个嵌套关系的div，如果外层div的父元素padding值为0，那么内层div的margin-top或者margin-bottom的值会“转移”给外层div。
我也遇到过，是比较诡异的，网上也有挺多资料介绍这个。
不用非得加border，你可以试试 overflow:hidden;
更多资料请百度：border 0 margin top bug
我也遇到过，是比较诡异的，网上也有挺多资料介绍这个。
不用非得加border，你可以试试 overflow:hidden;
更多资料请百度：border 0 margin top bug
第3个回答 2013-08-07
虽然没具体的明白你说的效果是想干嘛！ 但是大致了解了这个问题。首先margin属性需要float浮动属性， 其次是你的div没有宽度和高度。 这两个应该就是你问题的原因了吧！
相似回答