Bizzare行爲與CSS邊距

這個頁面我超級簡單，這應該是一件輕而易舉的事，但我很難過。Bizzare行爲與CSS邊距

我有兩個DIV，一個在另一個裏面。在第一個DIV中，我設置了頁邊距，使其位於頁面的頂部，居中。第二個DIV應該位於第一個中心位置，但頂部有50像素的邊距。但是，50px頁邊距被應用於父DIV而不是孩子。如果我向父DIV添加邊框，它的行爲就像我期望的那樣，但不是沒有。

任何人都可以提供任何見解嗎？提前致謝。

<div id="pageWrapper"> 
    <div id="mainWrapper"> 
    <p>foo</p> 
    </div> 
</div> 

*{ 
    margin:0px; 
    padding:0px;  
} 
body{ 
    background-color:#034375; 
} 
#pageWrapper{ 
    width:960px; 
    margin:0px auto 0px auto; 
    background:url('i/blue-gradient.jpg') top left no-repeat; 
} 
#mainWrapper{ 
    width:500px; 
    margin:50px auto 0 auto;  
    border:1px solid #000000; 
    background-color:#eeeeee; 
}

來源

2009-08-17 Tim Snyder

有沒有一個特定的瀏覽器，這種行爲不端行爲？它在Chrome中似乎對我很好。另外，你的意思是你想要填充而不是內部DIV的邊距？ – JMP 2009-08-17 19:43:28

填充或邊距 - 不應該結果相同 - 內部DIV壓低50px？ – 2009-08-17 19:55:53

不！填充和邊距在CSS中完全不同。 http://www.yourhtmlsource.com/stylesheets/cssspacing.html – dampkwab 2009-08-17 22:16:21

這個問題與渲染相鄰頁邊距的CSS規範有關。基本上，因爲包含div的邊距和內部div的邊距之間沒有任何「間隔」，所以更大的值用於兩者。

你會看到這主要在Firefox中，雖然行爲似乎遵循法律的字母，但我不確定這種特殊情況下的行爲是否符合規範作者的意圖。

幸運的是，很容易修復 - 在邊界之間放置一些東西。你已經注意到在父div上加一個邊框是可行的。您可以將此邊框設置爲透明，並將內邊距減少1px，並且在功能上與上述情況相同。另一種選擇是將一個padding-top像素應用於父div。第三個選項是在父div上使用padding-top: 50px，而不是將頂部邊距應用於子div。

有關collapsing margins的更多信息。

來源

2009-08-17 20:03:21 DanielMason

您可能想要設置mainWrapper的填充而不是邊距。

padding:50px 0 0 0;

查看this description of the box model查看margin和padding的區別。

來源

2009-08-17 19:43:23 Instantsoup

你不會說你看到了這個瀏覽器的瀏覽器。對我而言，它在Firefox中按預期工作。但是，我懷疑你在Internet Explorer中看到了這個問題。這可能是因爲內部div沒有應用hasLayout - 這通常是IE造型錯誤的原因。嘗試添加zoom：1到mainWrapper CSS聲明並查看是否有效。

來源

2009-08-17 19:45:49

哎呀，忘了說我在所有主流瀏覽器中看到了這一點：FF3，IE8，Safari。 – 2009-08-17 19:50:03

Bizzare行爲與CSS邊距

回答

相關問題