0

これはかなり単純だと思うので、コードを貼り付けます。

<!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 の制御された空間にあるはずだと思いますが、背景色は見えません。

4

2 に答える 2

0

マージンが崩壊するため。c1 ルールに追加overflow:autoします。

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

jsFiddle の例

于 2013-07-20T14:32:08.307 に答える
0

これはマージン崩壊の問題です。このインスタンスで目的の効果を得るには、c1 にパディングを追加します。マージンの崩壊に関するより複雑な問題に回答しましたが、そのような対策は必要ありません。

于 2013-07-20T14:35:00.643 に答える