CSS：標題邊距div

HTML/CSS新手在這裏。我想創建一個div（藍色），頂部有一個h1（紅色）。 h1應該有一個周圍30px的邊距。在h1下面是另一個div（綠色）。下面的代碼「應該」起作用，但是我得到的結果是h1在左側，底部和右側只有30px的邊距。頂部沒有餘量。爲什麼是這樣？CSS：標題邊距div

要明白我的意思，你可以在http://www.w3schools.com/css/tryit.asp?filename=trycss_default

謝謝了試試這個代碼！

<!DOCTYPE html> 
<html> 
<head> 
<style> 

body 
{ 
padding:0px; 
margin:0px; 
color: rgb(0,0,0); 
} 

div#frame1 
{ 
padding:0px; 
margin:50px auto; 
width:500px; 
background-color: rgb(0, 0, 255); 
} 

h1 
{ 
padding:0px; 
margin:30px; 
text-align:center; 
background-color:rgb(255, 0, 0); 
} 

div#frame2 
{ 
padding:0px; 
margin:0px; 
background: rgb(0, 255, 0); 
} 

</style> 
</head> 

<body> 

<div id="frame1"> 

<h1>Hello world</h1> 

<div id="frame2"> 
Hello again 
</div> 

</div> 

</body> 
</html>

來源

2014-02-20 Karnivaurus

這是由於collapsing margins。爲了糾正這一問題，添加overflow:auto（或邊界）到您的幀1格：

div#frame1 { 
    padding:0px; 
    margin:50px auto; 
    width:500px; 
    background-color: rgb(0, 0, 255); 
    overflow:auto; 
}

jsFiddle example

來源

2014-02-20 21:57:08 j08691

謝謝。將一個更優雅的方法是添加填充div1，而不是h1的餘量？在視覺效果相同的情況下，填充通常比邊距更好？ – Karnivaurus

那麼你不應該添加填充或邊距，因爲溢出規則修復了這個問題。但是填充vs保證金問題的確依賴於佈局。 – j08691

您的標題確實有一個30像素的餘量。問題是頁邊空白不包含背景顏色。如果您想要擴展背景顏色，則需要使用padding，而不是邊距。

padding:30px;

來源

2014-02-20 22:01:58

你應該添加overflow: auto;您div#frame1的造型，它應該修復它。否則會出現摺疊邊際。

CSS應該閱讀：

#frame1 { 
    padding:0px; 
    margin:50px auto; 
    width:500px; 
    background-color: rgb(0, 0, 255); 
    overflow: auto; 
}

附註（我不認爲這會影響什麼，但它可能）：在你的CSS調用div#frame1是多餘的。只需撥打#frame1即可。

來源

2014-02-20 22:02:58 andrewdcato

CSS：標題邊距div

回答

相關問題