填写整个< header>与颜色的背景 [英] Fill the entire <header> background with color
本文介绍了填写整个< header>与颜色的背景的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
< HTML>
< head>
< style>
header
{
background-color：＃ECF3F3;
}
< / style>
< / head>
< body>
< header>
< h1> Food Hunt< / h1>
<！ - < a href =login.php>登入< / a>
< a href =signup.php>注册< / a>
< form>
< input type =text>
< / form>
- >
< / header>
< nav>
< / nav>
<预计>
< / aside>
< footer>
< / footer>
< / body>
< / html>
问题：
<1>）我试图用背景色填充整个
< header> ，但问题是当我尝试查看页面，而不是使用颜色填充整个< header> ，在< header> 空间吗？ 解决方案
这可能是由于 body 或元素上的边距引起的。 html 元素，但它也可能是由
请参阅 jsFiddle 。
HTML
< header>
< h1>标题< / h1>
< / header>
CSS
header {
background-color：pink;
}
标题h1 {
margin：0;
}
html，body {
margin：0;
padding：0;
}
<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?
解决方案
This can be caused by the margin/padding on the body or html elements, but it can also be caused by the margin on your h1 element.
See this jsFiddle.
HTML
<header>
<h1>Title</h1>
</header>
CSS
header {
background-color: pink;
}
header h1 {
margin: 0;
}
html, body {
margin: 0;
padding: 0;
}
这篇关于填写整个< header>与颜色的背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
