为什么我的页眉周围有没有颜色的空白？答案

【问题标题】：Why does my page header have gaps around it without color?为什么我的页眉周围有没有颜色的空白？
【发布时间】：2013-12-11 19:33:11
【问题描述】：

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

header {
  background-color: #ECF3F3;
}

<body>
  <header>
    <h1>Food Hunt</h1>
  </header>
  <nav>
  </nav>
  <aside>
  </aside>
  <footer>
  </footer>
</body>

【问题讨论】：

标签： html css

【解决方案1】：

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

看到这个jsFiddle。

header {
    background-color: pink;
}

header h1 {
    margin: 0;
}

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

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

【讨论】：

【解决方案2】：

在你的css表的顶部添加

* {
  margin: 0;
  padding: 0;
}

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

【讨论】：

我不推荐这个。您将留下所有混合在一起的段落和列表，并且需要应用新的间距。最好更具体。
这有点像轻量级的 CSS 重置。一些开发人员更喜欢完全重置 css 默认值。让他们更好地控制每个元素。这是我一直使用的 css 重置，在这种情况下也可能会有所帮助：meyerweb.com/eric/tools/css/reset

【解决方案3】：

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

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

body{
    padding:0;
    margin:0;
}

header{
    background-color:#ECF3F3;
}

这应该会去除不需要的白色。

【讨论】：

【解决方案4】：

默认情况下，HTML 将应用填充和边距试试这个：

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

现在任何头部内部都将呈现没有边距或边框，使用 * 应用于所有元素也是如此

【讨论】：

【解决方案5】：

在你的 CSS 中添加这个：

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

看小提琴：

【讨论】：

【解决方案6】：

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

您会看到正文或 html 元素的边距或内边距。

【讨论】：