Question

看看这两个链接：

http://jsfiddle.net/carloscalla/N8q27/10/

HTML：

<!DOCTYPE html>
<body>
    <div id="container">
        <h1>Title</h1>
        <h2>Subtitle</h2>
    </div>    

    <div id="container2">
        <p>Hola</p>
    </div>
</body>

CSS：

h1
{
    background-color: green;

}
h2
{
    background-color: blue;

}
#container
{
    background-color: yellow;
    border: solid black 2px;
}
#container2
{
    background-color: orange;
    border: solid blue 2px;
}

渲染：

Rendered result of version 10

http://jsfiddle.net/carloscalla/N8q27/11/

HTML：

<!DOCTYPE html>
<body>
    <div id="container">
        <h1>Title</h1>
        <h2>Subtitle</h2>
    </div>    

    <div id="container2">
        <p>Hola</p>
    </div>
</body>

CSS：

h1
{
    background-color: green;

}
h2
{
    background-color: blue;

}
#container
{
    background-color: yellow;
}
#container2
{
    background-color: orange;
}

Rendered result of version 11

很简单，当我将边框应用于容器时，容器会考虑子容器的填充，如果我不应用边框（或填充工作），当我应用背景颜色时则不然，文档对象之间有一个空白区域。

有人可以解释一下吗？有没有办法解决它而不对容器应用填充或边框？

Answer 1

这是margin collapse。而不是应用边框，设置overflow: auto;。这解决了保证金崩溃的问题。

DEMO jsFiddle

#container
{
    background-color: yellow;
    overflow:auto;
}

Answer 2

这是由于margin collapsing - 在第一个例子中，容器包含两个标题，每个标题的默认顶部/底部边距为16px，并且因为流入块级元素的顶部边距将始终折叠使用它的第一个 in-flow块级子节点，<h1>边距将在容器之外折叠。

当您向容器添加边框时，您将阻止边距折叠。

从2.1规范：

如果元素的没有顶部边框，没有顶部padding，则流内块元素的上边距会与其第一个流内块级子元素的上边距折叠。孩子没有通关。

Box模型仅适用于容器有填充或边框的情况？

2 个答案: