为什么CSS中的边距不会填充背景颜色？

Question

为什么CSS中的边距不会填充背景颜色？

46

我有这个简单的HTML代码。

为什么背景颜色不能填满整个#footer元素的背景，包括margin区域？

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

- Hutarsh

14

使用 padding 替代 margin。margin 会在元素外部添加空白间隔，而 padding 则是在元素内部添加空白间隔。 - Mohammad Usman

2

阅读此链接：https://dev59.com/u2025IYBdhLWcg3whGWx。它会对你有所帮助。 - priya_singh

好的。明白了。谢谢大家。 - Hutarsh

7个回答

7

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

- Shlomi Haver

6

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

- Pravin Vavadiya

3

尝试将 border: 1px solid transparent 应用于 p 标签的父元素。

- Keerthivasan

0

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

- Roy CUBE

0

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

Margin（外边距）是应用于盒子外部的，而Padding（内边距）则适用于盒子内部。

以下是Margin和Padding的示例：

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

- Naveed Ramzan

请解释为什么这个有效，否则它就毫无意义。 - Pogrindis

Margin在盒子外部，而Padding在盒子内部。 - Naveed Ramzan

把这个放在你的答案里。另外，那不是一个非常清晰的解释，请参见：https://dev59.com/zlgR5IYBdhLWcg3wd9K5#41283805 - Pogrindis

更新并附上一个示例。 - Naveed Ramzan

0

外边距不包括在你的 div 盒模型中。

你应该添加内边距而不是外边距。这样可以让页脚颜色均匀，像这样：

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

- ab29007

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Fueled By Coffee · Accepted Answer

你应该使用 padding 而不是 margin，正如CSS的Box Model所描述的那样。

Margin提供了元素框外的空间，并因此不会被着色-它只是空间。
另一方面，Padding提供了元素框内部周围的空间，并且受到其他样式的影响并被着色。

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