html - 尽管边距和填充为 0，但菜单中的间隙很小

Question

我有一个问题:我想创建一个响应式菜单，但在移动模式下有类似 margin-left 和 margin-top 的东西，我不知道不知道如何消除这些差距。这是我的代码:

body{
  font-family: "Verdana", Geneva, sans-serif;
  background-color: white;
  margin: 0px;
  font-size: 100%;
  -moz-hyphens: auto;
  -o-hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto; 
}

#main{
  max-width: 800px;
  height: auto;
  background-color:#FF9;
  overflow: hidden;
  margin: 0px auto;
}

#menu{
  width:20%;
  background-color:#09F;
  float: left;
  text-align: center;
  line-height: 20px;
}

#menu a {
  text-decoration: none;
  -webkit-transition: color .3s ease-in-out;
  -moz-transition: color .3s ease-in-out;
  -o-transition: color .3s ease-in-out;
  -ms-transition: color .3s ease-in-out;
  transition: color .3s ease-in-out;
}

#menu a:hover{
  color: red;
  text-decoration:underline;
}

@media screen and (max-width: 800px) {
  #main{
    max-width: 800px;
    height: auto;
    left:0%;
    margin:0px;
  }

  #menu{
    position:absolute;
    display:block;
    float:left;
    width:100%;
    background-color:green;
    height: 60px;
    padding:0px;
    margin:0px;
    left:0px;
    top:0px;
  }

  #menu li{
    box-sizing: border-box;
    position:relative;
    list-style: none;
    float: left;
    cursor: pointer;

    display: block;
    width:  120px;
    height:30px;
    background-color:red;

  } 
}

<nav id="menu">
  <ul>
    <li><a href="#">Link1</a></li>
    <li><a href="#">Link2</a></li>
    <li><a href="#">Link3</a></li>
    <li><a href="#">Link4</a></li>
    <li><a href="#">Link5</a></li>
  </ul>
</nav>

有人知道我哪里出错了吗？

Answer 1

ul 有默认缩进值

ul{
   margin-left:20px;
  }

为避免这种冲突，您必须在 css 之上编写此代码

*{
  margin:0;
  padding:0;// Padding also took some indent. You can use if it was requires
 }

或者这样写

 ul{
    margin-left:0;
   }