html - 两个div之间的神秘空间

Question

我正在创建一个在发生触摸事件时显示的 HTML 导航菜单。

在打开/关闭菜单的按钮和菜单列表之间是一个我无法摆脱的空白，甚至无法弄清楚为什么它在那里!

(对我而言)奇怪的是，如果我向菜单列表的包含 block 添加 1px 边框 <div id="navContent"/>差距消失了。

我已经将 CSS 和 HTML 问题的演示放到 jsfiddle 中，网址为 http://jsfiddle.net/ufvmj4n9/

#container {
    position:relative;
    top: 0px;
    width:100%;
    height:100%;
}
#mobileMenuBtn {
    display: block;
    position: relative;
    opacity: 0;
    width:290px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0px;
    background-color:#00F;
    height:23px;
}
#navContainer {
    display:block;
    position: absolute;
    top:95px;
    width:100%;
    height:auto;
}
#navContent {
    /*border:1px solid green;*/
    position:relative;
    top:0px;
    height:350px;
    width:290px;
    margin-left: auto;
    margin-right: auto;
    background-color: rgba(51,102,204,0.8);
}
#navList {
    position:relative;
    top:30px;
    list-style-type: none;
    width:100%;
    margin-left: 30px;
    text-align: left;
    padding:0;
}
.navText {
    position: inherit;
    display: list-item;
    left:0px;
    font-family: Verdana, "Trebuchet MS", Arial;
    font-size: 1.1em;
    font-weight: normal;
    color: #FFF;
    margin-bottom:30px;
    outline: none;
    text-align: left;
}
nav a {
    text-decoration: none;
}


<div id="container">
    <nav id="navContainer">
        <div id="mobileMenuBtn" style="opacity: 1;"></div>
        <div id="navContent">
            <ul id="navList">
                <li><a class="navText selectDisable" id="navItem5" tabindex="0" data-name="home">home</a></li>
                <li><a class="navText selectDisable" id="navItem4" tabindex="1" data-name="solutions">solutions</a></li>
                <li><a class="navText selectDisable" id="navItem3" tabindex="2" data-name="experience">experience</a></li>
                <li><a class="navText selectDisable" id="navItem2" tabindex="3" data-name="equipment">equipment</a></li>
                <li><a class="navText selectDisable" id="navItem1" tabindex="4" data-name="training">training</a></li>
                <li><a class="navText selectDisable" id="navItem0" tabindex="5" data-name="contact">contact</a></li>
            </ul>
        </div>
    </nav>
</div>

首先，我很想知道为什么存在这个差距，因为我找不到与之相关的边距(我使用过 Chrome 和 Safari 开发者工具)。其次，如何最好地删除它(我假设(希望)没有对元素 id“navContent”应用负“top”值)。

在此先感谢您的帮助。

D

Answer 1

您忘记将 ul 默认样式归零:

#navList { margin-top: 0; }

祝你好运!