网页顶部的html样板间隙

Question

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

HTML 代码：

<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 为 #logoBox 与 div 的顶部边缘相邻。

Answer 2

你有一个大的margin-top 用于 div #logoBox。

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

#logoBox {margin-top: 0; padding-top: 5em;}

---

预览

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