父母和孩子的尺寸計算

有人可以幫我理解爲什麼#child和#parent的尺寸不一樣嗎？父母和孩子的尺寸計算

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
     <title>Title</title> 
    </head> 
    <body> 
     <div id='parent' style='border: 1px solid black'> 
      <div id='child' style='background-color: #888888'> 
       <p>Here is some content</p> 
       <div id='grandchild' style='margin-bottom: 1em'> 
        <p>A little more content</p> 
       </div> 
      </div> 
     </div> 
    </body> 
</html>

來源

2011-01-21 WorkerThread

填充？保證金？ – SuperSaiyan 2011-01-21 16:08:29

+1這對我來說很奇怪。 – Jake 2011-01-21 16:19:44

這是發生了什麼事：

保證金崩潰。 Jeroen的回答指向W3C box model specs for collapsing margins，這讓我很頭疼，並沒有完全回答邊界問題（Oded首先指出）。然後我找到了this article並將解決方案拼湊在一起（我只是談論最高利潤率，但這種完全相同的解決方案適用於底部利潤率）。

當兩個[塊級]元素的垂直邊距感人，較大餘量使用和較小的餘量被丟棄。
代碼中的所有內容均被視爲塊級元素，包括<html>和<body>標記。
<body>在其父代<html>元素內具有8px的默認margin-top。
第一個標記具有16px的默認margin-top。
保證金摺疊不侷限於兄弟姐妹，因此標籤開始檢查其父標籤的位置和邊距。
的#child元件具有爲0的上邊距正在觸摸#child上邊距一個margin-top，所以他們塌陷到單個16px的餘量（16> 0）。 標籤的16像素邊距「通過」，用作#child標籤的邊距。
從開始的16像素邊距仍在檢查其正上方的邊距。接下來將是#parent標籤，其中也有0
一個邊距，但在#parent的像素邊框防止從去任何進一步。不會碰到它以上的任何邊緣，因爲它觸及1px邊框。因此崩潰停止在#parent的頂部邊界內。
呈現16px頂部邊距，底部是0x10邊距被摺疊的#child標籤。

這就是爲什麼#parent盒比#child箱32PX高：該利潤「撞破」，直到他們碰到了什麼東西，這不是一個保證金（該像素邊框）。那麼，如果#parent上的1px邊框不在那裏停止合攏，會發生什麼？

按照上述步驟1-7。
的頂部邊距運行到#parent元素的0px頂部邊距。再次，是更大的餘量（16比0），所以崩潰繼續向上。
的上邊距達到<body>標籤。 <body>具有8px的默認頂部邊距。 標籤更大，所以<body>標籤已經「繼承了」16px頂部邊距，並且8px被丟棄。
的上邊距達到<html>標籤。由於<html>是根元素，因此摺疊在此處停止。所述<body>標籤生成用16px的頂緣，和#parent，#child和元件所有渲染下方; 在#parent框內很貼切，因爲邊距在其中崩潰。

之所以這樣，我花了這麼長的時間找出相同的原因，我沒有聽說過崩潰邊緣的直到今天：螢火蟲沒有清楚地描繪崩潰邊緣。在Firebug中，標籤仍顯示它擁有16px的上邊距。這是真的。但是，沒有任何跡象表明已經發生崩潰--標記仍然報告8px頂部邊框，儘管它已被丟棄。

我很高興我現在知道這一點;它澄清了我對頁面佈局的很多困惑。

編輯：

The article I referenced是真正值得讀。它不僅給我提供了答案所需的信息，還詳細說明了在IE7中，<body>標籤不參與邊框摺疊。這解釋了很多。

來源

2011-01-21 19:21:21 Jake

因爲您的父div的邊界爲1px，而孩子沒有。

這會在父div的寬度和高度上增加2個像素。

來源

2011-01-21 16:07:11 Oded

爲什麼邊界造成這種情況？我認爲添加邊框不會影響尺寸，除了邊框的厚度。編輯：如果這個評論不明確，是的，你是正確的，邊界是改變尺寸的罪魁禍首。我只是不明白爲什麼。 – WorkerThread 2011-01-21 16:11:03

由於p和bottom-margin上#grandchild的標準餘量。它們以body的標準餘量崩潰。

您可以重置body,p等的邊距，並使用填充而不是邊距來避免這種情況;襯墊不會倒塌。

來源

2011-01-21 16:10:54 jeroen

`border：1px solid black`如何導致不同的行爲？ – Jake 2011-01-21 16:16:21

父母和孩子的尺寸計算

回答

相關問題