Question

所以我有这个简单的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>

Answer 1

如CSS Box Model所述，您应该使用padding代替margin。

边距提供超出元素框的空间，因此不会被着色 - 它只是空间。
另一方面，填充会在元素框的内部周围提供空间，并且会被其他样式着色并受其影响。

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

Answer 2

这就是css box模型的工作原理。 Tha背景仅适用于padding和content区域，这就是您不会在边距中看到背景的原因。修复很简单，只需将margin更改为padding。

Answer 3

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

Answer 4

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

Answer 5

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

您添加填充而非边距。这样可以让你的页脚颜色统一。像这样：

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

Answer 6

尝试为p标签的父元素赋予“边框：1px透明的透明色”。

Answer 7

$(".fm").hover(function() {
    var index = $(this).data("index");
    $(this).siblings(".featured-wrap".find(".mo"+index).toggleClass("active");
})

保证金不会充满背景颜色，为什么

7 个答案: