爲什麼我的頭浮動留下一個餘量在頁面頂部？

我在做基於從樹項目煉功點，我有一個小問題。我的風格的頭部元素，一切都很好有什麼我迄今所做的，我唯一的問題是，當我浮動元素留我在頁面的頂部得到的餘量。如果沒有浮動，元素就會碰到瀏覽器的頂部。是什麼原因造成這種利潤率出現？我使用normalize.css和我的代碼如下：爲什麼我的頭浮動留下一個餘量在頁面頂部？

<header> 
     <a href="index.html" class="logo"> 
      <h1>Nick Pettit</h1> 
      <h2>Designer</h2> 
     </a> 
     <nav> 
      <ul> 
       <li><a href="">Portfolio</a></li> 
       <li><a href="">About</a></li> 
       <li><a href="">Contact</a></li> 
      </ul> 
     </nav> 
    </header> 




body { 
    font-family: 'Open Sans', sans-serif; 
} 

.wrapper { 
    max-width: 940px; 
    margin: 0 auto; 
    padding: 0 5%; 
} 

a { 
    text-decoration: none; 
} 

img { 
    max-width: 100%; 
} 

h3 { 
    margin: 0 0 1em 0; 
} 


header { 
    float: left; 
    margin: 0 0 30px 0; 
    padding: 5px 0 0 0; 
    width: 100%; 
} 

.logo { 
    text-align: center; 
    margin: 0; 
} 

h1 { 
    font-family: "Changa One", sans-serif; 
    margin: 15px 0; 
    font-size: 1.75em; 
    font-weight: normal; 
    line-height: 0.8em; 
} 

h2 { 
    font-size: .75em; 
    margin: -5px 0 0 ; 
    font-weight: normal; 
}

來源

2014-04-21 user3555134

有一些空間：

<h1>已經margin-top: 15px（由margin: 15px 0引起）
<header>有padding-top: 15px（由padding: 5px 0 0 0）
（*）<body>具有margin-top: 8px（在瀏覽器內部的樣式引起margin: 8px）

刪除它們不會產生空間：Demo

（*）在Firefox 31.其他瀏覽器的行爲可能不同。

來源

2014-04-21 01:19:59 Oriol

爲什麼我的頭浮動留下一個餘量在頁面頂部？

回答

相關問題