如何使元素宽度的背景颜色成为孔位[重复]答案

【问题标题】：How to make the Background Color of an element width the hole site [duplicate]如何使元素宽度的背景颜色成为孔位[重复]
【发布时间】：2021-09-20 11:06:24
【问题描述】：

<!DOCTYPE html>

<style>
  body {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: x-large;
    color: black;
    text-align: center;
  }
  
  #heading {
    background-color: gray;
  }
</style>
<html>
<meta charset="utf-8">

<head>
  <title>Testsite</title>
</head>

<body>
  <div id="top">
    <div id="heading">
      <h1>Test</h1>
    </div>
    <div id="caption">
      <p>Testsite</p>
    </div>
  </div>
  <div id="main">

  </div>
  <div id="footer">

  </div>
</body>

</html>

使用此代码，网站如下所示：

但我希望它看起来像这样：在这张图片中，灰色条上方没有白色条。我希望你能理解我想说的话，我希望你能帮助我:)

【问题讨论】：

body { margin: 0; } 将重置 UA 的默认边距。因此，您可以移除整个网站周围的白框。
我强烈建议您在下次使用谷歌翻译之类的翻译器。这里不需要说一口流利的英语，但足以让其他人理解你。你这样的问题毫无意义，而且非常难以理解。
PS：您的 HTML 标记无效。 <style> 标记和<meta> 标记属于不高于<html> 标记的头部元素。
谢谢，它可以工作，但如何让上面的白条也消失？

标签： html css colors background-color

【解决方案1】：

将样式放在 <head> 中。白色 spces 是由于 margin makeit 0. 你去：

<!DOCTYPE html>


<html>
<meta charset="utf-8">

<head>
<style>

  body {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: x-large;
    color: black;
    text-align: center;
    margin:0;
  }
  
  #heading {
    background-color: gray;
    margin: 0;
  }
  
  h1 {
  margin:0;
  }
</style>


  <title>Testsite</title>
</head>

<body>
  <div id="top">
    <div id="heading">
      <h1>Test</h1>
    </div>
    <div id="caption">
      <p>Testsite</p>
    </div>
  </div>
  <div id="main">

  </div>
  <div id="footer">

【讨论】：

所有边距的全局重置是不建议的。这将导致 msot 部分出现意外行为，需要稍后修复。仅重置您实际想要删除的边距要容易得多。
好的，我已经更新了答案。

【解决方案2】：

将此添加到您的 CSS：

#heading h1 { margin: 0; }

【讨论】：

【解决方案3】：

background-color 意思是定义元素背景的颜色。 color CSS 属性设置元素文本和文本装饰的前景色值它可以像下面这样使用：- 颜色：灰色；更多：- https://www.w3schools.com/css/css_colors.asp

【讨论】：

我认为您错过了实际问题。问题不在于 abckground-color 本身，而是由边距引起的空白。