保證金沒有得到填充背景顏色，爲什麼

所以我有這個簡單的一段HTML代碼。我的問題是，爲什麼當我將它應用於整個div元素時，背景顏色不會用顏色填充邊距，我該如何解決這個問題？保證金沒有得到填充背景顏色，爲什麼

<!doctype html> 
 
<html> 
 

 
<head> 
 
    <style> 
 
    #footer { 
 
     background: #263238; 
 
     margin: 100px; 
 
     padding: 0; 
 
    } 
 
    .footer-text { 
 
     margin: 0; 
 
     color: #fff; 
 
    } 
 
    </style> 
 
</head> 
 

 
<body> 
 
    <div id="footer"> 
 
    <div class="footer-text">All Rights Reserved © 2016</div> 
 
    </div> 
 
</body> 
 

 
</html>

來源

2016-12-22 Hutarsh

+10

使用'padding'而不是'margin'。保證金添加外部縮進。 'padding'增加內部。 –

閱讀本文http://stackoverflow.com/questions/5958699/difference-between-margin-and-padding。它會幫你 –

好的。得到它了。謝謝大家。 – Hutarsh

您應該使用padding，而不是margin通過CSS的Box Model描述。

保證金提供空間超越元素的盒子，因此不會是彩色的 - 它只是空間。
填充另一方面提供圍繞圍繞元素框的的空間，並且被着色並受其他樣式的影響。

<!doctype html> 
 
<html>  
 
    
 
    <head> 
 
    <style> 
 
     #footer { 
 
      background: #263238; 
 
      padding: 100px; 
 
     } 
 
     .footer-text { 
 
      margin: 0; 
 
      color: #fff; 
 
     } 
 
    </style> 
 
    </head> 
 
    
 
    <body> 
 
    <div id="footer"> 
 
     <div class="footer-text">All Rights Reserved © 2016</div> 
 
    </div> 
 
    </body> 
 
    
 
</html>

來源

2016-12-22 13:01:52

解決我的問題。謝謝。 :) – Hutarsh

<!doctype html> 
    <html> 
     <head> 
      <style> 
       #footer{background: #263238;padding: 100px;} 
       .footer-text{margin: 0;color: #fff;} 
      </style> 
     </head> 
     <body> 
      <div id="footer"> 
       <div class="footer-text">All Rights Reserved © 2016</div> 
      </div> 
     </body> 
    </html>

餘量在箱外部施加而填充適用箱內。

以下是邊距/填充的示例。

http://www.goer.org/images/html/boxbasic.png

來源

2016-12-22 12:59:50

請解釋它爲什麼可行。否則它是無用的。 – Pogrindis

邊框在框外。而Padding在盒子裏面。 –

把它放在你的答案中。此外，這不是一個非常明確的解釋：請參閱：http://stackoverflow.com/a/41283805/1606432 – Pogrindis

您可以使用padding。

如果您可以使用margin，那麼它會在邊界之外留下空間，並且padding它會在邊界內留出空間。所以它適用於使用padding的您。

#footer{background: #263238; padding: 100px;} 
 
.footer-text{margin: 0;color: #fff;}

<div id="footer"> 
 
     <div class="footer-text">All Rights Reserved © 2016</div> 
 
    </div>

來源

2016-12-22 13:00:38

這是CSS盒模型是如何工作的。 Tha背景僅適用於padding和content區域，這就是爲什麼您沒有看到邊緣的背景。修復很簡單，只需將margin更改爲padding即可。

來源

2016-12-22 13:04:39

保證金未包含在您的div的Box模型中。

您添加填充而不是保證金。這會讓你的頁腳顏色統一。像這樣：

#footer { 
    background: #263238; 
    margin:0; 
    padding:100px; 
}

但是，如果你正在尋找不同的顏色在外面，那麼你可以使用邊境這樣得到：

#footer { 
    background: #263238; 
    margin:0; 
    padding:0; 
    border:100px solid green; 
}

現在，您可以在您的盒子模型邊界所以它不會搞亂你的頁面結構。通過爲頁腳定義box-sizing來完成此操作。

#footer { 
    background: #263238; 
    margin:0; 
    padding:0; 
    border:100px solid green; 
    box-sizing:border-box; 
}

來源

2016-12-22 13:06:41 ab29007

保證金沒有得到填充背景顏色，爲什麼

回答

相關問題