网页顶部的html样板间隙

Question

我是HTML5样板的新手，并尝试构建一个页面。这是我的code。

HTML code：

<div id="wrapper">
        <div id="home">
            <div id="logoBox">
                <div id="logo"></div>
            </div>
            <!-- logoBox ends -->
            <header>
                <nav>
                    <ul>
                        <li>HOME</li>
                        <li>PORTFOLIO</li>
                        <li>TESTIMONIALS</li>
                        <li>ABOUT</li>
                        <li>CONTACT</li>
                    </ul>
                </nav>
            </header>
        </div>
        <!-- home ends -->
    </div>
    <!-- Wrapper ends -->

CSS代码：

* {
    margin:0;
    padding:0;
    z-index:0;
    position:relative;
    width:auto;
    height:auto;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    /* Firefox */
}
html, body {
    top:0;
    left:0;
    margin:0;
    padding:0;
    /*border:1px solid #000000;*/
}
#wrapper {
    top:0;
    left:0;
    position:relative;
    width:100%;
    height:100%;
    /*border:1px solid #FFFFFF;*/
    display : box;
    overflow:hidden; /*auto*/
}

@keyframes btnHvr {
    from {
        background-color:#8bca3c;
    }
    to {
        background-color:#FFFFFF;
    }
}

@-webkit-keyframes btnHvr
/*Safari and Chrome*/
 {
    from {
        background-color:#8bca3c;
    }
    to {
        background-color:#FFFFFF;
    }
}

#home {
    width:100%;    
    height:auto;
    background-color:#8bca3c;
    /*border:1px solid #000000;    <<-- This border removes the gap*/
}

#logoBox {
    /*border:1px solid #000000;*/
    text-align:center;
    width:100%;
    height:auto;
    position:relative;
    margin-top:5em;
    margin-bottom:2em;
}
#logo {
    height:8em;
    width:8em;
    margin:auto;
    text-align:center;
    line-height:8em;
    font-size: 1em;
    background-color:#8bca3c;
    border:2px solid #FFFFFF;
    color:#FFFFFF;
}
#logo:hover {
    color:#8bca3c;
    animation: btnHvr 1s;
    -webkit-animation:btnHvr 1s;
    /*Safari and Chrome*/
    background-color : #FFFFFF;
}
nav {
    margin:auto;
    width: 60%;
    height: auto;
    text-align: center;
}
Header nav ul {
    padding:0;
    margin:0;
}
header nav ul li {
    display: inline-block;
    width:9.5em;
    height:auto;
    padding-top: 0.5em;
    padding-bottom:0.4em;
    background-color : #8bca3c;
    border:1px solid #FFFFFF;
    border-left:1px solid #FFFFFF;
    margin-right:-1px;
    margin-left:0;
    margin-bottom:1em;
    color:#FFFFFF;

    font-family:"Lucida Sans Typewriter", "Lucida Console", Monaco, "Bitstream Vera Sans Mono", monospace;

    font-weight: bold;*/
}

header nav li:hover {
    color:#8bca3c;
    animation: btnHvr 1s;
    -webkit-animation:btnHvr 1s;
    /*Safari and Chrome*/
    background-color : #FFFFFF;
}

为什么网页顶部会有间隙。

如果我使用#home div的边框，则间隙消失。 我已经尝试了stackoverflow和其他资源中的每个答案，但是在我的代码中没有解决方案。

除了使用 border 之外，还有替代解决方案。

Answer 1

原因为Adjoining margins - 您margin-top: 5em的{​​{1}}与div的margin-top相邻。

Answer 2

div [{1}}有一个很大的margin-top。

就这样做，改变 CSS ，它可能会起作用：

#logoBox

---

预览

小提琴：http://jsfiddle.net/Dr38e/1/