0

看看这两个链接：

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;
}

渲染：

版本 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;
}

版本 11 的渲染结果

很简单，当我将边框应用到容器时，容器会考虑孩子的填充，如果我不应用边框（或填充也可以），那么当我应用背景颜色时，它不会有一个文档对象之间的空白。

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

4

2 回答 2

2

这是利润崩溃。而不是应用边框，设置overflow: auto;. 这解决了保证金崩溃。

演示jsFiddle

#container
{
    background-color: yellow;
    overflow:auto;
}
于 2013-08-26T15:45:00.863 回答
2

这是由于边距折叠- 在第一个示例中，容器包含两个标题，每个标题的默认顶部/底部边距为 16px，并且因为流入块级元素的顶部边距总是会随着它的第一个流入而折叠块级子级，<h1>边距超出容器。

向容器添加边框时，可以防止边距折叠。

从 2.1 规范：

如果元素没有上边框、没有上边距且子元素没有间隙，则流入块元素的上边距与其第一个流入块级子元素的上边距一起折叠。

于 2013-08-26T15:47:19.293 回答