Question

所以基本上我无法删除页面的顶部。它只是白色空间，无论我改变了多少css，我似乎无法改变任何东西。我希望我的导航栏位于页面顶部，没有填充或边框或任何东西。这是我的代码，我知道这可能是最简单的事情，只是我现在找不到它。

HTML

<!DOCTYPE html>

<html>

<head>
    <meta name="Description" content="This is a test website!"/>
    <meta name="author" content="Me!"/>
    <title>test | Home</title>
    <link type="text/css" rel="stylesheet" href="css/style.css"/>
</head>

<body>

    <div id="wrapper">
        <nav id="navmenu">
            <ul>
                <li>Home</a>
                <li>About</li>
                <li>Tutorials</li>
                <li>Services</li>
                <li>Contact Us</li>
            </ul>

        <aside id="sidenews">

        </aside>

        <div id="center">

            <section id="mainsection">
                <article>
                    <header>
                        <hgroup>
                            <h1>This is a test</h1>
                            <h2>I like tests!</h2>
                        </hgroup>
                    </header>
                    <section>
                        <p>This is the main section of my section (sectception)</p>
                    </section>
                    <footer>
                        <p>Time and date</p>
                    </footer>
                </article>
            </section>

        </div>

        <footer id="cright">
            <p>This is the copyright section. All rights reserved.</p>
        </footer>
</body>

</html>

CSS

*{
margin: 0;
padding: 0;
}

header, section, footer, aside, nav, article, hgroup{
    display: block;
}

a{
    text-decoration: none;
    color: #FFF;
}

a:hover{
    color: #333399;
}


#wrapper{
    width: 1000px;
    margin: 20px auto;
    text-align: left;
    background-color: #FFF;
}

#navmenu{
    background: #3366CC;
    color: #eee;
    text-align: center;
    height: 100px;
    padding: 0;
    margin:0;
    float: top;
    width: 100%;
}

#navmenu li{
    display: inline-block;
    list-style: none;
    padding: 20px;

}

#navmenu li:hover{
    color: #FFF;
    background: #3399FF;
    border-radius: 15px;
    -moz-border-radius: 5px;
}




#mainsection{
    float:left;
    width: 630px;
    margin:30px;
    margin-top: 2
    background-color:#FFF;
    color: #222;
    text-align: left;

}

#cright{
    text-align: center;
    background-color: #AAA;

    clear: both;
}

#center{
    width: 1000px;
    height: 1000px;
    background-color:#FFF;
}

#sidenews{
    float:right;
    width: 250px;
    height: 940px;
    margin: 0px 0px;
    padding: 30px;
    background-color:#FFF;
}

Answer 1

将包装器的边距更改为0？

#wrapper{
    margin: 0 auto;
}

Answer 2

你的#wrapper元素的上边距为20px - 是吗？

#wrapper{
  width: 1000px;
  margin: 0 auto;
  text-align: left;
  background-color: #FFF;
}

Answer 3

在包装器上将边距设置为0

#wrapper {
    background-color: #FFFFFF;
    margin: auto;
    text-align: left;
    width: 1000px;
}

删除页面顶部的边框

3 个答案: