twitter-bootstrap 即使边距设置为 0，HTML 正文也不在页面顶部
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19080185/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML body is not at the top of the page even with margin set to 0
提问by Robert
This is a Ruby on Rails app and I can't get the body at the top of the page. Screenshot: 
这是一个 Ruby on Rails 应用程序，我无法在页面顶部获取正文。截屏：
I have no clue why this is happening as I've set all the properties correctly. Here is the source of the entire application.My view:
我不知道为什么会发生这种情况，因为我已经正确设置了所有属性。这是整个应用程序的来源。我的观点：
<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>
My CSS (the commented out CSS is the hack I wrote to fix the issue by changing the positioning of the header-wrap and wrapper elements):
我的 CSS（注释掉的 CSS 是我通过更改 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;
}
}
回答by vishalkin
Please check your header tag. run your code removing <h1>Blog</h1>.
请检查您的标题标签。运行您的代码删除<h1>Blog</h1>.
and add
并添加
h1{
margin: 0;
}
but keep <h1>Blog</h1>.
但保持<h1>Blog</h1>。
EDITED
已编辑
make #header-wrap{ position:absolute;}this is because your #headeris inside #header-wrapand remove
使#header-wrap{ position:absolute;}这是因为你#header在里面#header-wrap并删除
h1{
margin: 0;
}
回答by CIRCLE
回答by SU15
add *{margin:0}body will then start from 0
*{margin:0}然后添加主体将从 0 开始
回答by flobacca
The problem for me was that the body had two alert paragraphs in it.
我的问题是正文中有两个警告段落。
<p class="notice"><%= notice %></p>
Changed the p's to sections.
将 p 更改为部分。
