刪除頁面頂部邊距

我似乎無法刪除頁面頂部的這一點空間，我嘗試了很多東西並閱讀。似乎工作的唯一的事情是* {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; 
}

來源

2014-01-24 Artex

如果你想只有頂部邊距爲零。你可以明確提到像margin-top：0px; – kjana83

@ kjana83問題是我根本無法刪除它。 – Artex

添加CSS：

#Banner p {margin:0}

在你的旗幟DIV該段已經要一個預設保證金擺脫。

來源

2014-01-24 04:05:03 j08691

謝謝，就是這樣。 – Artex

一些元素和瀏覽器有你需要重寫，以滿足一些默認樣式您需要。

我建議您使用CSS reset腳本Eric Meyer。

這不僅可以解決您的問題，還可以幫助您預防並節省將來處理跨瀏覽器兼容性問題的大量時間。

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

來源

2014-01-24 04:04:14 Felix

如果這成爲一個反覆出現的問題，我會記住這一點。 – Artex

我試着給margin-top：-7px。有效。但不知道爲什麼它在那裏有一些空間。

來源

2014-01-24 04:07:37 kjana83

刪除頁面頂部邊距

回答

相關問題