css这是为什么啊


body背景颜色是灰色。有一个div是包含所有元素的，背景颜色是白色，宽度950居中显示。这个div中最上方有一个div，这个div margin-top是10px 在IE8测试的时候 却不是里面的div下移10px 而是外面的div一起下移10px 这是为什么 不要告我怎么解决 我只想知道这是为什么

追问：0分还回答那么认真，很佩服你啊。

这是浏览器的一个BUG么？

还有就是padding上下都要设置么？只设置padding-top行么呵呵 谢谢你

答案：楼上两个根本就不知道楼主问的到底是什么问题...

你这个问题是由于：盒模型解析的垂直外边距合并引起的；下面是两个段落：

<div>
<p>段落一</p>
<p>段落二</p>
</div>

如果你给 p段落 标签设置上下外边距各 10px：p{margin:10px 0;}

那么，段落一 的顶部离外面那个 div 应该是 10 px，段落二 的底部离外面那个 div 距离也是 10px；但是 段落一 和 段落二 之间这时因为各自有一个 10px 的外边距，加起来就是 20px 的距离，这个就造成了排版上的错误，正确的是 段落一 和 段落二 之间也是 10px 的距离，为了处理这个问题，浏览器解析到 css 中有上下两个垂直相邻的外边距时，就会自动合并他们。

因为垂直合并了外边距(不管你外面的大div有没外边距都会合并)，浏览器混淆了外面 div 和里面 div 的界限，错误的把那 10px 外边距解析到最外面的 div 上面去了。

我做了个图片可能更容易说清楚些，不知道怎么传不上来，我传我空间相册了，你去看看：
http://hiphotos.zzzyk.com/dognicole/pic/item/27d4aa8b4989810c9f2fb4cd.jpg


解决办法：

你最外面的 div 加个上下方向的 padding 内边距，有内边距就会隔开里面那个 div 的垂直方向外边距，强制其无法产生垂直外边距自动合并。
(如果你的外面那个 div 有固定的高度的话，假设原来固定高度是 height:200px; 你加的内边距为 padding:1px 0; 请记得在高度中减去上下 2px 的内边距离，即高度改为：height:198px;)

其他：把上网DIV顶部的线条宽度定成10PX试试，用margin-top，我有时也会错位，都是这样解决的。 你是这个意思吗？
<body>
<div style="margin-top:10px;"></div>
<div>……</div>
</body>
有代码吗 从没遇到过。

上一个：<link id="themeCSS" rel="stylesheet" type="text/css" />什么意思。。具体点
下一个：jsp 导入css ie6 怎么不行？

更多图片编程知识: