时间戳

首页 > 解决方案 > 如何使元素的背景颜色宽度为孔位

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

问题描述

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

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

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

标签： htmlcsscolorsbackground-color

解决方案

把风格放在里面<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">

推荐阅读