为什么 window-border 和列表（项目）之间有间距？

Question

我一直在无休止地寻找为什么我的 window 边框和一个简单菜单的第一项之间有一个额外的间距，用列表构建。我尝试了所有可以在网上找到的方法，但仍然存在这个额外的间距...

有没有人有想法或建议？

HTML代码是：

<body>

<div class="indexblock">
        <div id="menu">

            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Tours</a></li>
                <li><a href="#">B2B</a></li>
                <li><a href="#">Scholen</a></li>
                <li><a href="#">Contact</a></li>
                <li><a href="#">Nl/En</a></li>
            </ul>

        </div>
</div>



<div class="block">
    <div id="one">
        <div id="frame">            

<h1> dit is een titel </h1>
<p> dit is heel wat tekst dit is heel wat tekst dit is heel wat tekst 
dit is heel wat tekst dit is heel wat tekst dit is heel wat tekst dit is heel wat tekst 
dit is heel wat tekst dit is heel wat tekst dit is heel wat tekst dit is heel wat tekst 
dit is heel wat tekst dit is heel wat tekst dit is heel wat tekst </p>

<h1> Dit is een tussentitel </h1>

<p> dit is heel wat tekst dit is heel wat tekst dit is heel wat tekst 
dit is heel wat tekst dit is heel wat tekst dit is heel wat tekst dit is heel wat tekst 
dit is heel wat tekst dit is heel wat tekst dit is heel wat tekst dit is heel wat tekst 
dit is heel wat tekst dit is heel wat tekst dit is heel wat tekst </p>

<p class="filled"> Dit is een ondertittel </p>

        </div>
    </div>
</div>

css：

html, body
{
    padding: 0;
    margin: 0;
}
html
{
    height: 100%;
}

body
{
    padding: 0;
    margin: 0;
    font-size: 12px;
    line-height: 1.4;
    position: relative;
    background: url(../img/background.jpg) fixed no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    font-family:"helvetica";
    font-color:#ff6633 !important;
}

#block{
    float:center;
    margin-top: 50px;
    margin-left: auto; 
    margin-right: auto;
    background:#fff;
    width:80%;
    display:block;
    opacity:0.9;
    position:relative;
    overflow:hidden;
    moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

#indexblock{
    float:center;
    margin-top: 50px;
    margin-left: auto; 
    margin-right: auto;
    width:80%;
    display:block;
    opacity:0.9;
    position:relative;
    overflow:hidden;
}

#menu {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 80%;
    display: table;
    overflow: hidden; 
    moz-border-radius: 7px;
    -webkit-border-radius: 7px;
    border-radius: 7px;
    opacity:0.9;
}
#menu li {
    display: inline;
    height: 25px;
    margin: 0;
    font-size: 18px;
}
#menu li:first-child {
    padding-left: 0px;
}
#menu li a {
    width: 80%;
    display: inline;
    height: 100%;
    padding: 10px; 
    margin: 0;
    line-height: 50px;
    text-decoration: none;
    background-color: #fff;
    font-weight: bold;
    color: #ff6633;
    moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    opacity:0.9;
    border-color:#ff6633;
    border-style:solid;
    border-width:3px;
    }

#menu li a:hover {
    background-color: #16375b;
    color: #fff;
    border-color:#fff;
}

Answer 1

默认情况下，<ul>标签（无序列表）上有边距和填充。

只需将以下代码添加到您的样式表中：

#menu ul {
    margin: 0;
    padding: 0;
}

希望对您有所帮助！

为什么 window-border 和列表（项目）之间有间距？

Why is there a spacing between the window-border and a list(item)?

html

css

list

spacing