Question

有人可以解释为什么在内部div边距的最外层div中没有显示背景颜色吗？

<div style="background-color:yellow;">
    <div style="margin-top:10px;background-color:black;color:white;">
        Why isn't the background color yellow inside my top margin?
    </div>
</div>

Answer 1

这称为“margin collapse”。

在CSS中，两个或多个框（可能是也可能不是兄弟）的相邻边距可以组合形成单个边距。据说以这种方式组合的边距会崩溃，因此产生的合并边距称为折叠边距。

在其他答案中找到，将padding或border添加到父级会阻止边距折叠。

我还成功地将以下CSS应用于容器，基于tarkabak的method described here。（请注意:before和:after的{{3}}。）

.prevent-margin-collapse:before,
.prevent-margin-collapse:after
{
    content: "\00a0"; /* No-break space character */
    display: block;
    overflow: hidden;
    height: 0;
}

<div style="background-color:yellow;" class="prevent-margin-collapse">
    <div style="margin-top:10px;background-color:black;color:white;">
        Why isn't the background color yellow inside my top margin?
    </div>
</div>

limited browser compatibility

Answer 2

这称为“margin collapse”。

在CSS中，两个或多个框（可能是也可能不是兄弟）的相邻边距可以组合形成单个边距。据说以这种方式组合的边距会崩溃，因此产生的合并边距称为折叠边距。

在其他答案中找到，将padding或border添加到父级会阻止边距折叠。

我还成功地将以下CSS应用于容器，基于tarkabak的method described here。（请注意:before和:after的{{3}}。）

.prevent-margin-collapse:before,
.prevent-margin-collapse:after
{
    content: "\00a0"; /* No-break space character */
    display: block;
    overflow: hidden;
    height: 0;
}

<div style="background-color:yellow;" class="prevent-margin-collapse">
    <div style="margin-top:10px;background-color:black;color:white;">
        Why isn't the background color yellow inside my top margin?
    </div>
</div>

limited browser compatibility

Answer 3

除了其他答案：这是collapsing margins的问题。 “在父母和子元素之间折叠边距”部分应适用于此特定情况。

更新：以下是直接从CSS3的box model specification获取的关于此主题的声明（您可以在CSS2规范中找到几乎相同的句子）：

某些相邻的边距合并形成一个边距。这些利润被称为“崩溃”。如果没有非空的内容，填充或边界区域或间隙将边缘分开，则边距相邻。

Answer 4

要实现您想要看到的内容，请更改您的html：

<div style="background-color:yellow; padding-top:10px;">
    <div style="background-color:black;color:white;">
        Why isn't the background color yellow inside my top margin?
    </div>
</div>

原因是外部div没有设置宽度，只占用其内容的大小。

Answer 5

我认为这与不从其他地方继承任何属性有关。

<div style="background-color:yellow; position: fixed;">
   <div style="margin-top:10px;background-color:black;color:white;">
        Why isn't the background color yellow inside my top margin?
    </div>
</div>

http://jsfiddle.net/rJ3HG/

为什么不显示背景css颜色？

5 个答案: