即使margin設置爲0，HTML正文也不在頁面的頂部

Question

這是一個Ruby on Rails應用程序，我無法在頁面頂部獲取正文。屏幕截圖：

我不知道爲什麼會發生這種情況，因爲我已正確設置所有屬性。 Here is the source of the entire application.我的觀點：

<div id="header-wrap"> 
    <div id="header"> 
    <h1>Blog</h1> 
    </div> 
</div> 

<div id="wrapper"> 
    <div id="posts"> 
    <% @posts.each do|post| %> 
    <div id="post"> 
     <h2><%= post.title %></h2> 
     <%= simple_format post.body %> 
     <small> 
     <%= link_to 'Edit', edit_post_path(post) %> | 
     <%= link_to 'Destroy', post, method: :delete, data: { confirm: 'Are you sure?' } %> 
     </small> 
    </div> 
    <% end %> 
    </div> 

    <br> 

    <%= link_to 'New Post', new_post_path %> 
</div> 

我的CSS（註釋掉CSS是我寫的，通過改變頭，包裝和包裝元素的定位來解決該問題的黑客）：

/* 
* This is a manifest file that'll be compiled into application.css, which will include all the files 
* listed below. 
* 
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets, 
* or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path. 
* 
* You're free to add application-wide styles to this file and they'll appear at the top of the 
* compiled file, but it's generally better to create a new file per style scope. 
* 
*= require_self 
*= require_tree . 
*= require twitter/bootstrap 
*/ 
html, body, { 
    background-image:url('bg.png'); 
    background-color:#cccccc; 
    padding: 0; 
    margin: 0; 
} 

#header-wrap { 
    background-color: #424242; 
/* position: absolute;*/ 
    height: 100px; 
    width: 100%; 
    top: 0; 
} 

#header { 
    margin: 0 auto; 
    color: #FFFFFF; 
    width: 588px; 
} 

#wrapper { 
/* position: relative; 
    top: 100px;*/ 
    padding: 0 6px; 
    margin: 0 auto; 
    width: 588px; 
} 

#posts { 
} 

#notice { 
    color: green; 
} 

.field_with_errors { 
    padding: 2px; 
    background-color: red; 
    display: table; 
} 

#error_explanation { 
    width: 450px; 
    border: 2px solid red; 
    padding: 7px; 
    padding-bottom: 0; 
    margin-bottom: 20px; 
    background-color: #f0f0f0; 
    h2 { 
    text-align: left; 
    font-weight: bold; 
    padding: 5px 5px 5px 15px; 
    font-size: 12px; 
    margin: -7px; 
    margin-bottom: 0px; 
    background-color: #c00; 
    color: #fff; 
    } 
    ul li { 
    font-size: 12px; 
    list-style: square; 
    } 
} 

Answer 1

請檢查您的標題標籤。運行您的代碼刪除<h1>Blog</h1>。

，並添加

h1{ 
    margin: 0; 
    } 

，但保持<h1>Blog</h1>。

EDITED

使#header-wrap{ position:absolute;}這是因爲你#header裏面#header-wrap和刪除

h1{ 
     margin: 0; 
     } 

Answer 2

爲了避免更多的問題，在未來的CSS，添加這種「重置CSS」到頂部你的樣式表。
Reset CSS