Html 边距没有填充背景颜色，为什么
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/41283662/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
margin doesn't get filled with background color,why
提问by Hutarsh
So I have this simple piece of html code. My question is that why doesn't the background color fills the margin with the color when I applied it to whole div element and how can I fix this?
所以我有这段简单的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>回答by Fueled By Coffee
You should use paddinginstead of marginas described by CSS's Box Model.
您应该使用padding而不是marginCSS 的Box Model所描述的那样。
Margin is providing space beyondthe element's box and therefore won'tbe colored - it's simply space.
Padding on the other hand provides space around the insideof the element's box and is colored and affected by other styles.
边距提供超出元素框的空间，因此不会被着色——它只是空间。
另一方面，填充为元素框的内部提供了空间，并受其他样式的影响和着色。
<!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>回答by Pravin Vavadiya
You can use padding.
您可以使用padding.
If you can use marginthen it's leave space outside of border and paddingit's leave space inside border. So it's works perfect for you using 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>回答by Shlomi Haver
This is how the css box model works.
Tha background is applied only to the paddingand contentareas, that is why you don't see the background in the margin.
the fix is simple just change the marginto be padding.
这就是 css 盒模型的工作原理。Tha 背景仅应用于padding和content区域，这就是为什么您看不到边距中的背景。修复很简单，只需margin将padding.
回答by ab29007
Margindoesn't get included in the Box-model of your div.
Margin不包含在您的 div 的 Box-model 中。
You add paddinginstead of margin. That will get you uniform color in your footer. like this:
您添加填充而不是边距。这将使您在页脚中获得统一的颜色。像这样：
#footer {
background: #263238;
margin:0;
padding:100px;
}
But if you are looking for different color on the outside then you can get this using borderlike this:
但是如果你在外面寻找不同的颜色，那么你可以使用这样的边框来获得它：
#footer {
background: #263238;
margin:0;
padding:0;
border:100px solid green;
}
Now you can include border in your box-model so it doesn't mess up with your page structure. Do this by defining box-sizingfor the footer.
现在你可以在你的盒子模型中包含边框，这样它就不会干扰你的页面结构。通过box-sizing为页脚定义来做到这一点。
#footer {
background: #263238;
margin:0;
padding:0;
border:100px solid green;
box-sizing:border-box;
}
回答by Keerthivasan
Try giving border: 1px solid transparentto the parent element of the p tag.
尝试给border: 1px solid transparentp 标签的父元素。
回答by Naveed Ramzan
<!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 is applied outside the box while padding is applicable inside the box.
边距适用于框外，而填充适用于框内。
Here is an example of margin/padding.
这是边距/填充的示例。
