嵌套的div應用保證金外框模型

我無法爲我的<figure>添加保證金，但它嵌套在<header>內。嵌套的div應用保證金外框模型

當我申請margin-top:10px它適用於整個身體，而不是在<header>標籤內。如果有幫助的話，我也使用reset.css。

這是在大學的任務，不能得到一個答案導師的答案。

代碼：

<html> 
    <body> 
    <header> 
     <figure></figure> 
    </header> 
    </body> 
</html>

CSS：

body { 
      backround-color: #f2f2f2; 
      margin:0px; 
      padding:0px; 
    } 
    header { 
      display: block; 
      position: static; 
      max-width: 980px; 
      height: 100px; 
      background: #1e1e1e; 
      margin:0px auto 0px auto; 
    } 
    header figure { 
      margin-top:10px; /** when this margin top is added it creates a margin on the full page instead of inside the header**/ 
      margin-left:10px; 
      max-width:200px; 
      height:80px; 
      background:red; 
    }

來源

2014-09-10 JWoods

添加padding到header代替。使用box-sizing:border-box以及這將阻止填充的向外延伸：

header { 
    display: block; 
    position: static; 
    max-width: 980px; 
    height: 100px; 
    background: #1e1e1e; 
    margin:0px auto; 
    padding: 10px 0 0 10px; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
}

JSFIDDLE

來源

2014-09-10 15:03:07 jmore009

我也嘗試添加填充，但它確實擴展了紅色框，我不知道框的大小：border-box;這是一個工作。也非常感謝你的回答。 – JWoods 2014-09-10 15:05:09

沒問題，只是一個關於j08691的答案FYI，如果由於某種原因，你的內容擴展到固定標題大小以下...例如：也許你有水平鏈接，當瀏覽器變得更小時，它們會降低到允許的標題大小。 ..'overflow：auto'會導致滾動條出現在您的標題中。可能不會是一個問題（特別是在標題中），但只是要注意它的一些問題。 – jmore009 2014-09-10 15:08:12

@Joods更正，你現在可以滾動，關於'overflow'的事情是隻包含行爲，不解決它。「自動」行爲是當瀏覽器溢出時會添加滾動條，以便您可以滾動以查看更多內容。你可以使用'overflow：hidden'，它不會添加滾動條，但也會導致問題。如果您的標題內有一個設置爲「overflow：hidden」的下拉菜單，如果菜單延伸超出標題的高度，它將被切斷。 – jmore009 2014-09-10 15:16:17

你看到的被稱爲collapsing margins。添加overflow:auto到你的頭，以獲得行爲你是後：

header { 
    display: block; 
    position: static; 
    max-width: 980px; 
    height: 100px; 
    background: #1e1e1e; 
    margin:0px auto 0px auto; 
    overflow:auto; 
}

jsFiddle example

來源

2014-09-10 14:58:36 j08691

非常感謝您的快速答覆，工作立竿見影。謝謝。 – JWoods 2014-09-10 15:00:40

不客氣。 – j08691 2014-09-10 15:01:35

嵌套的div應用保證金外框模型

回答

相關問題