消除水平菜单的顶部空间

Question

我想创建一个水平菜单，它从页面顶部开始，这意味着我不想在它上面有任何边距，但我不知道如何做到这一点。我试过使用top: 0; margin:auto;，但它不起作用。。。我的CSS代码就在这里：

.menu1 
{
     position: absolute;
     top: 0;
     margin:auto;
     left: 0;
     right: 0;
     width: 100%;
 }
.menu1 ul 
{
     list-style-type: none;
     padding: 0;
     overflow: hidden;
     height: 30px;
     background-color: purple;
 }
.menu1 li 
{
     float:left;
     margin-right: 10px;
 }
.menu1 li a 
{
     display: block;
     color: white;
     text-align: center;
     padding: 8px 10px;
     text-decoration: none;
}
.menu1 li a:hover 
{
     text-decoration: underline;
}

Answer 1

添加边距：0在.menu1 ul中

一切都会好起来的。

参见下方的代码

感谢

.menu1 
{
     position: absolute;
     top: 0;
     margin:auto;
     left: 0;
     right: 0;
     width: 100%;
 }
.menu1 ul 
{
     list-style-type: none;
     padding: 0;
     overflow: hidden;
     height: 30px;
     background-color: purple;
  margin:0;
 }
.menu1 li 
{
     float:left;
     margin-right: 10px;
 }
.menu1 li a 
{
     display: block;
     color: white;
     text-align: center;
     padding: 8px 10px;
     text-decoration: none;
}
.menu1 li a:hover 
{
     text-decoration: underline;
}

<div class="menu1">
  <ul>
    <li>one</li>
    <li>one</li>
    <li>one</li>
    <li>one</li>
    </ul>
  </div>

Answer 2

body, html, .menu { margin:0 auto; }

Answer 3

插件样式可能有助于

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

Answer 4

您有两个选项。

1:*{margin:0px 0px; padding:0px 0px;}

2：使用重置CSS