0

这是代码：

<html>

    <head>
        <title></title>

        <style type="text/css">

        * {border: 0px; padding: 0px;}

        #greenbox
        {
            margin: 20px;
            border: 5px solid green;

        }   

        #redbox
        {
            margin: 20px;
            border: 5px solid red;
        }

        #bluebox
        {
            border: 5px solid blue; 
            margin-left: 20px;
            margin-right: 20px;
            margin-bottom: 20px;
                        margin-top: 20px; /*COLLAPSES - why??*/
        }

        </style>
    </head>
    <body>

        <div id="greenbox">

            <div id="redbox">

                red box
            </div>

            <div id="bluebox">

                    bluebox

            </div>

        </div>



    </body>
</html>

基本上，它是一个绿色的盒子，里面有一个红色的盒子和一个蓝色的盒子。

为什么红框和蓝框的垂直间距不是40px？

我知道红色框的下边距和蓝色框的上边距已“折叠”，但我的理解是，如果您有边框或填充，边距不会折叠（我都试过了 - 仍然同样的结果。

4

2 回答 2

2

边距不会因边界而崩溃。他们确实相互崩溃。

看这个例子：

<style>
body { background: black; }
.red { background: red; }
.blue { background: blue; }
.border { border: solid white 1px; }
div { margin: 20px; min-height: 30px; width: 50% }
</style>


<div class="red">
    <div class="blue">
    </div>
</div>

<div class="red border">
    <div class="blue border">
    </div>
</div>

当边框存在时，蓝色 div 顶部的边距将蓝色 div 的顶部推离它所在的红色 div 的顶部。当边框不存在时，边距穿过边缘并折叠到红色 div 周围的边距中。

你的两个边距相互接触，它们之间没有边界——所以它们会塌陷。

于 2011-03-18T13:29:05.273 回答
2

在盒子模型中，边距在边界之外，因此边界与折叠的边距无关。

你可以在这里阅读盒子模型：http: //www.w3.org/TR/CSS21/box.html

您可以在此处阅读折叠边距：http: //www.w3.org/TR/CSS21/box.html#collapsing-margins

于 2011-03-18T13:30:59.900 回答