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

Question

显然，有些人遇到了问题，水平菜单中的<li>项之间存在差距。 但是，在我的情况下，标题和水平菜单之间存在差距。

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

首先，我怀疑此问题来自标题和菜单的宽度属性，但两者的值相同（即width: 100%;）。当菜单的宽度为relative时，菜单会变得太短。我试图做的是使两个长度完全相同。

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

＆＃13;

＆＃13;

#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;
}

＆＃13;

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

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

HI现在习惯于css重置，为此你可以

定义#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

Answer 2

我看起来身体标签带有特定于浏览器的预定义边距/填充。

所以，我建议添加以下内容：

body {
   margin: 0px;
   padding: 0px;
}

添加此代码后，对我来说一切正常。

这是因为你的标题获得了父母宽度的100％，这就是正文。所以，你的标题确实有其父级的边距/填充，只是通过bodys margin / padding指定。

Answer 3

删除身体标记的预定义边距。

body{
    margin: 0;
}