即使边距设置为 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 是我编写的 hack，通过更改 header-wrap 和 wrapper 元素的位置来解决问题):

/*
 * 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

请检查您的 header 标签。运行你的代码删除 <h1>Blog</h1> .

并添加

h1{
     margin: 0;
  }

但保留<h1>Blog</h1> .

已编辑

制作#header-wrap{ position:absolute;}这是因为你的 #header在里面#header-wrap并删除

h1{
         margin: 0;
      }