Question

我似乎无法删除页面顶部的这一部分空间，我尝试了很多东西并阅读。似乎唯一有用的是* {margin：0}，但我真的不想这样做。有人对这里的问题有一些了解吗？

您可以在此处查看相关网页：http://www.ryanlaurence.com/new/

HTML

<!DOCTYPE html>

<html>

<head>
    <link href="Style.css" rel="stylesheet">
</head>

<body>
    <div id = "Banner">
        <p>Banner</p>
    </div>
    <div id = "Nav">
        <div id="stripe"></div>
        <ul>
            <li><a href = "#"> Link</a>  -  </li>
            <li><a href = "#"> Link</a>  -  </li>
            <li><a href = "#"> Link</a>  -  </li>
            <li><a href = "#"> Link</a>     </li>
        </ul>
    </div>
    <div class="Content">
        <div></div>
    </div>
    <div id="Footer">

    </div>
</body>

</html>

CSS

body, html{
    background-color: #404040;
    margin: 0;
    padding: 0;
}

#Banner{
    background-color: #333333;
    height:200px;
    top:0px;
}
#stripe{
    height: 10px;
    top: -14px;
    position:relative;
    background-color: #262626
}

#Nav{
    width:100%;
    height: 60px;
    background-color: #262626;
}
#Nav ul{
    margin: 0;
    color: gray;
    position: relative;
    text-align: center;
}
#Nav ul li{
    display: inline;
}
#Nav ul a{
    color: gray;
    text-decoration: none;
    padding-right: 10px;
    padding-left: 10px;
    font-size: 25px;
    font-family: "Orator Std", verdana;
    text-align: center;
}
#Nav ul li a:hover{
    color: white;
}

.Content{
    background-color: #333333;
    /*height: 800px;*/
    position: relative;
    top: 5px;
}
.Content div{
    height:800px;
}
#Footer{
    background-color:#57B4CC;
    height:150px;
}

Answer 1

某些元素和浏览器有一些默认样式需要覆盖才能满足您的需求。

我建议你Eric Meyer使用CSS reset脚本。

这不仅可以解决您的问题，还可以帮助您防止并节省大量时间来处理将来的跨浏览器兼容性问题。

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video {
    border:0;
    font-size:100%;
    font:inherit;
    vertical-align:baseline;
    margin:0;
    padding:0
}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
    display:block
}
body {
    line-height:1
}
ol,ul {
    list-style:none
}
blockquote,q {
    quotes:none
}
blockquote:before,blockquote:after,q:before,q:after {
    content:none
}
table {
    border-collapse:collapse;
    border-spacing: 0
}

<强> Fiddle Demo

Answer 2

添加CSS：

#Banner p {margin:0}

您的横幅div中的段落有一个您想要摆脱的默认边距。

Answer 3

我试图给出margin-top：-7px。有效。但不确定为什么它在那里有一些空间。

删除页面上的上边距

3 个答案: