如何使元素宽度的背景颜色成为孔位

Question

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

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

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

Answer 1

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

Answer 2

将样式放在 <head> 内。空白是由于边距使它成为 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">

Answer 3

将此添加到您的 CSS：

#heading h1 { margin: 0; }

如何使元素宽度的背景颜色成为孔位

How to make the Background Color of an element width the hole site

html

css

colors

background-color