0 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
#a
{
    background:#33F;
    width:1000px;
    height:1000px;
}

#b
{
    width:500px;
    height:500px;
    background:#F00;
}

#c
{
    margin-top:50px;
    height:200px;
    width:200px;
    background:#FF0;
}
</style>
</head>

<body>

<div id="a">
    <div id="b">
        <div id="c">
        </div>
    </div>
</div>
</body>
</html>

为什么 div#c 会从浏览器顶部边缘化，而不是远离 div#b。

4

3 回答 3

3

CSS 有一个叫做边距折叠的概念。

两个边距相邻当且仅当：

...

  • 两者都属于垂直相邻的框边，即形成以下对之一：
    • 一个盒子的上边距和它的第一个流入孩子的上边距
于 2013-01-14T20:05:18.447 回答
0

您可以添加position: relative;到 #b 元素和position: absolute;#c 元素

于 2013-01-14T20:10:42.520 回答
0

你错误地理解了这一点。它正在做你想做的事——当 div 有内容时。

我已经插入了不间断的空格来实现你想要的。

http://jsbin.com/ifofix/2/

下面是其他小伙伴的建议

http://jsbin.com/ifofix/3/

于 2013-01-14T20:12:35.643 回答