CSS:页边距上的不可见背景

我认为这很简单，所以我只粘贴代码。

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        .c1 {
            background: yellow;
            width: 800px;
        }
        .c2 {
            background: blue;
            margin: 50px;
        }
    </style>
</head>
<body>
<div class="c1">
    <div class="c2">  
        1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>
    </div>
</div>
</body>
</html>

问题是，为什么页面顶部或底部没有黄色条带？我认为它应该在c1的受控空间中，但背景颜色是不可见的。

因为页边距正在塌陷。将overflow:auto添加到c1规则：

 .c1 {
     background: yellow;
     width: 800px;
     overflow:auto;
 }

jsFiddle示例

这是保证金崩溃问题。在c1中添加填充以获得此实例中所需的效果。我已经回答了围绕保证金崩溃的更复杂的问题，但这不需要采取这样的措施。

相关内容

最新更新

热门标签：