为什么边距在 CSS 中没有填充背景颜色？答案

【问题标题】：Why doesn't margin get filled with background color in CSS?为什么边距在 CSS 中没有填充背景颜色？
【发布时间】：2017-05-08 02:38:04
【问题描述】：

我有这段简单的 HTML。

为什么背景色没有填满整个#footer 元素的背景——具体来说，包括边距？

<!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>

【问题讨论】：

使用padding 而不是margin。边距添加外部缩进。 padding 添加内部。
阅读此stackoverflow.com/questions/5958699/…。它会帮助你
好的。知道了。谢谢大家。

标签： html css margin

【解决方案1】：

<!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

【讨论】：

请解释为什么会这样。否则没用。
边距在框外。而 Padding 在盒子里面。
把它放在你的答案中。这也不是一个很清楚的解释：见：stackoverflow.com/a/41283805/1606432
更新了一个例子

【解决方案2】：

您可以使用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>

【讨论】：

【解决方案3】：

您应该使用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>

【讨论】：

【解决方案4】：

这就是 CSS 盒子模型的工作原理。该背景仅应用于padding 和content 区域，这就是为什么您看不到边距中的背景。解决方法很简单，只需将 margin 更改为 padding。

【讨论】：

【解决方案5】：

Margin 不会包含在您的 div 的 Box-model 中。

您添加 padding 而不是边距。这将使您在页脚中获得统一的颜色。像这样：

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

但是，如果您正在寻找不同的外部颜色，那么您可以使用 border 来获得它，如下所示：

#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;
}

【讨论】：

【解决方案6】：

尝试将border: 1px solid transparent 赋予p 标签的父元素。

【讨论】：

【解决方案7】：

<!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>

【讨论】：