CSS：保證金上的隱形背景

這是相當簡單的東西，我想，所以我只需粘貼代碼即可。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的控制空間中，但背景色只是看不見的。

來源

2013-07-20 Mike Lee

給浮點數：留給C1，然後檢查它。那麼會有一個黃色的地帶。 –

由於收縮邊緣。添加overflow:auto到您的C1規則：

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

jsFiddle example

來源

2013-07-20 14:32:08 j08691

謝謝，很好的解決方案。 –

這是保證金崩潰的問題。在此實例中將填充添加到c1以獲得所需的效果。我已經回答了更多有關邊緣崩潰的複雜問題，但這並不需要採取這樣的措施。

來源

2013-07-20 14:35:00 Vector

CSS：保證金上的隱形背景

回答

相關問題