HTML/CSS - 如何删除标题和水平菜单之间的间隙

Question

显然，有些人遇到了一个问题，<li> 之间存在差距。水平菜单中的元素。 然而，就我而言，标题和水平菜单之间存在间隙。

红色区域是标题，黑色区域是水平菜单。

起初，我怀疑这个问题来自标题和菜单的宽度属性，但两者的值是相同的(即 width: 100%; )。当菜单的宽度为relative时，菜单变得太短。我正在尝试做的是使两个长度完全相同。

以下是我的部分编码。如果您能提供任何建议，我将不胜感激。

#header {
  list-style-type: none;
  float: left;
  width: 100%;
  background-color: #FF0000;
  margin-top: 0;
}
#menu ul {
  margin-top: 0;
  list-style-type: none;
  width: 100%; /*When this is relative or deleted, the menu becomes too short*/
  float: left;
  background-color: #0c0c0c;
}
#menu ul li {
  position: relative;
  float: left;
  text-align: center;
  padding: 10px 10px 10px 10px;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
}

<div id="header">
  /*some coding*/
</div>

<div id="menu">
  <ul>
    <li>
      <!--some coding -->
    </li>
  </ul>
</div>

Answer 1

HI 现在用于 css Reset，为此你可以

定义#menu ul{padding:0;}

#header {
  list-style-type: none;
  float: left;
  width: 100%;
  background-color: #FF0000;
  margin-top: 0;
}
#menu ul{padding:0;}
#menu ul {
  margin-top: 0;
  list-style-type: none;
  width: 100%; /*When this is relative or deleted, the menu becomes too short*/
  float: left;
  background-color: #0c0c0c;
}
#menu ul li {
  position: relative;
  float: left;
  text-align: center;
  padding: 10px 10px 10px 10px;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
}

<div id="header">
  /*some coding*/
</div>

<div id="menu">
  <ul>
    <li>
      <!--some coding -->
    </li>
  </ul>
</div>

What is css reset