Html 用颜色填充整个 <header> 背景
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20220781/
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
Fill the entire <header> background with color
提问by caramel1995
<html>
<head>
<style>
header
{
background-color:#ECF3F3;
}
</style>
</head>
<body>
<header>
<h1>Food Hunt</h1>
<!-- <a href="login.php">login</a>
<a href="signup.php">sign up</a>
<form>
<input type="text">
</form>
-->
</header>
<nav>
</nav>
<aside>
</aside>
<footer>
</footer>
</body>
</html>
The Question :
问题：
1.)I was trying to fill the entire <header>with the background color, but the problem is that when I try to view the page, instead of filling the entire <header>with the color, there are white color borders on top, left and right of the <header>. May I know the reason why the background color doesn't fill the whole <header>space entirely?
1.) 我试图<header>用背景颜色填充整个，但问题是当我尝试查看页面时，不是<header>用颜色填充整个，而是在顶部、左侧和右侧有白色边框<header>. 我可以知道背景颜色没有完全填满整个<header>空间的原因吗？
回答by Dan Grahn
This can be caused by the margin/padding on the bodyor htmlelements, but it can also be caused by the margin on your h1element.
这可能是由body或html元素上的边距/填充引起的，但也可能是由h1元素上的边距引起的。
See this jsFiddle.
看到这个jsFiddle。
HTML
HTML
<header>
<h1>Title</h1>
</header>
CSS
CSS
header {
background-color: pink;
}
header h1 {
margin: 0;
}
html, body {
margin: 0;
padding: 0;
}
回答by Roy M J
All HTML document by default have a margin surrounding all four corners of it. So you have to explicitly remove this margin every time you create a new HTML page/template.
默认情况下，所有 HTML 文档的四个角都有一个边距。因此，每次创建新的 HTML 页面/模板时，您都必须明确删除此边距。
The following can help you remove the default margin attached with the HTML pages :
以下内容可以帮助您删除 HTML 页面附带的默认边距：
body{
padding:0;
margin:0;
}
header{
background-color:#ECF3F3;
}
And this should remove the unwanted white color.
这应该去除不需要的白色。
Demo : http://jsbin.com/OVAnowe/1/
回答by ANeves
It does fill the whole header with background colour.
它确实用背景颜色填充了整个标题。
You are seeing the margins or padding for the body or the html elements.
您看到的是 body 或 html 元素的边距或填充。
回答by UID
Add this in ur CSS:
在你的 CSS 中添加这个：
body {
height:100%;
margin:0;
padding:0
}
h1 {
margin:0;
padding:0
}
See the Fiddle:
见小提琴：
回答by TheChristopher
By default HTML will apply padding and a margin try this:
默认情况下，HTML 将应用填充和边距，试试这个：
header h1{border: 0; margin: 0;}
*{border: 0; margin: 0;}
Any inside of header will now render without a margin or border, the same goes for using * to apply to all elements
标题的任何内部现在都将在没有边距或边框的情况下呈现，使用 * 应用于所有元素也是如此
回答by Brandon May
At the top of ur css sheet add
在你的 css 表的顶部添加
* {
margin: 0;
padding: 0;
}
This will reset the pages margin and padding properties to 0, allowing the background color property to fill the .
这会将页面边距和填充属性重置为 0，从而允许背景颜色属性填充 .
