Question

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

问题：

1.）我试图用背景颜色填充整个<header>，但问题是当我尝试查看页面时，而不是用颜色填充整个<header>， <header>的顶部，左侧和右侧有白色边框。我可以知道背景颜色不能完全填满整个<header>空间的原因吗？

Answer 1

这可能是由body或html元素上的边距/填充引起的，但也可能是由h1元素上的边距引起的。

请参阅此jsFiddle。

<强> HTML

<header>
    <h1>Title</h1>
</header>

<强> CSS

header {
    background-color: pink;
}

header h1 {
    margin: 0;
}

html, body {
    margin: 0;
    padding: 0;
}

Answer 2

默认情况下，所有HTML文档都有一个围绕其四个角的边距。因此，每次创建新的HTML页面/模板时都必须明确删除此边距。

以下内容可以帮助您删除HTML页面附带的默认边距：

body{
    padding:0;
    margin:0;
}

header{
    background-color:#ECF3F3;
}

这应该可以消除不需要的白色。

演示：http://jsbin.com/OVAnowe/1/

Answer 3

它用背景颜色填充整个标题。

您正在查看正文或html元素的边距或填充。

Answer 4

在CSS中添加：

 body {
    height:100%;
    margin:0;
    padding:0
}
h1 {
    margin:0;
    padding:0
}

见小提琴：

<强> http://jsfiddle.net/SN3e3/

Answer 5

默认情况下，HTML会应用填充和边距尝试：

header h1{border: 0; margin: 0;}
*{border: 0; margin: 0;}

标题内部的任何内部现在都会呈现没有边距或边框，使用*来应用于所有元素也是如此

http://jsfiddle.net/LXAJg/

Answer 6

在您的CSS表格顶部添加

* {
  margin: 0;
  padding: 0;
}

这会将页面的页边距和填充属性重置为0，从而允许背景颜色属性填充。

用颜色</header>填充整个<header>背景

问题：

6 个答案: