Html 如何删除网页中的上边距？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2489070/
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
How do I remove the top margin in a web page?
提问by RoryG
I have had this problem with every web page I have created. There is always a top margin above the 'main container' div I use to place my content in the center of the page. I am using a css style sheet and have set margins and padding in the body to 0px and set the margin and padding to 0 in the div:
我创建的每个网页都有这个问题。“主容器”div 上方总是有一个上边距，我用来将我的内容放在页面的中心。我正在使用 css 样式表，并将正文中的边距和填充设置为 0px，并将 div 中的边距和填充设置为 0：
body{
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
padding: 0;
color: black;
font-size: 10pt;
font-family: "Trebuchet MS", sans-serif;
background-color: #E2E2E2;
}
div.mainContainer{
height: auto;
width: 68em;
background-color: #FFFFFF;
margin: 0 auto;
padding: 0;
}
I have looked online many times, but all I can see to do is set these margin and padding attributes. Is there something else I should be doing? The margin exists in IE and Firefox.
我在网上看了很多遍，但我所能看到的就是设置这些边距和填充属性。还有什么我应该做的吗？边距存在于 IE 和 Firefox 中。
Here is a more thorough look at the code (it is in the beginning stages of creation, so there isn't much in it...)
这是对代码的更彻底的查看（它处于创建的开始阶段，所以它没有太多......）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- TemplateBeginEditable name="doctitle" -->
<title></title>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" --><!-- TemplateEndEditable -->
<link href="../Styles/KB_styles1.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="mainContainer">
<p>Here is the information</p>
</div>
</body>
</html>
Here is the CSS:
这是CSS：
@charset "utf-8";
/* CSS Document */
body{
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
padding: 0;
color: black;
font-size: 10pt;
font-family: "Trebuchet MS", sans-serif;
background-color: #E2E2E2;
}
/* ---Section Dividers --------------------------------------------------------------*/
div.mainContainer{
position: relative;
height: auto;
width: 68em;
background-color: #FFFFFF;
margin: 0 auto;
padding: 0;
}
div.header{
padding: 0;
margin: 0;
}
div.leftSidebar{
float: left;
width: 22%;
height: 40em;
margin: 0;
}
div.mainContent{
margin-left: 25%;
}
div.footer{
clear: both;
padding-bottom: 0em;
margin: 0;
}
/* Hide from IE5-mac. Only IE-win sees this. \*/
* html div.leftSidebar { margin-right: 5px; }
* html div.mainContent {height: 1%; margin-left: 0;}
/* End hide from IE5/mac */
回答by strager
Is your first element h1or similar? That element's margin-topcould be causing what seems like a margin on body.
你的第一个元素h1还是类似的？该元素margin-top可能会导致body.
回答by sagar
I had similar problem, got this resolved by the following CSS:
我有类似的问题，通过以下 CSS 解决了这个问题：
body {
margin: 0 !important;
padding: 0 !important;
}
回答by jwbreedlove
The best way to reset margins for all elements is to use the css asterisk rule.
为所有元素重置边距的最佳方法是使用 css 星号规则。
Add this to the top of your css under the @charset:
将此添加到 @charset 下的 css 顶部：
* {
margin: 0px;
padding: 0px;
}
This will take away all the preset margins and padding with all elements body,h1,h2,p,etc. Now you can make the top or header of your page flush with the browser along with any images or text in other divs.
这将去除所有元素 body、h1、h2、p 等的所有预设边距和填充。现在，您可以使页面的顶部或标题以及其他 div 中的任何图像或文本与浏览器齐平。
回答by mindmyweb
A lot of elements in CSS have default padding and margins set on them. So, when you start building a new site, it's always good to have a reset.cssfile ready. Add this to make to rub the default values, so you have more control over your web page.
CSS 中的许多元素都设置了默认的内边距和边距。因此，当您开始构建新站点时，reset.css准备好文件总是好的。添加此项以使用默认值，以便您更好地控制您的网页。
/* CSS reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
margin:0;
padding:0;
}
html,body {
margin:0;
padding:0;
}
/* Extra options you might want to consider*/
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset,img {
border:0;
}
input{
border:1px solid #b0b0b0;
padding:3px 5px 4px;
color:#979797;
width:190px;
}
address,caption,cite,code,dfn,th,var {
font-style:normal;
font-weight:normal;
}
ol,ul {
list-style:none;
}
caption,th {
text-align:left;
}
h1,h2,h3,h4,h5,h6 {
font-size:100%;
font-weight:normal;
}
q:before,q:after {
content:'';
}
abbr,acronym {
border:0;
}
I hope this helps all fellow developers this is something that bugged for me a while when I was learning.
我希望这可以帮助所有开发人员，这是我在学习时困扰我一段时间的事情。
回答by ryanve
You can prevent the effects of margin collapsingwith:
您可以通过以下方式防止边距崩溃的影响：
body { overflow: hidden }
That will make the bodymargins remain accurate.
这将使body边距保持准确。
回答by Sunil
I had same problem. It was resolved by following css line;
我有同样的问题。它是通过以下 css 行解决的；
h1{margin-top:0px}
My main div contained h1tag in the beginning.
我的主要 divh1一开始就包含标签。
回答by edan
I have been having a similar issue. I wanted a percentage height and top-margin for my container div, but the body would take on the margin of the container div. I think I figured out a solution.
我一直有类似的问题。我想要容器 div 的百分比高度和上边距，但主体将占据容器 div 的边距。我想我想出了一个解决方案。
Here is my original (problem) code:
这是我的原始（问题）代码：
html {
height:100%;
}
body {
height:100%;
margin-top:0%;
padding:0%;
}
#pageContainer {
position:relative;
width:96%; /* 100% - (margin * 2) */
height:96%; /* 100% - (margin * 2) */
margin:2% auto 0% auto;
padding:0%;
}
My solution was to set the height of the body the same as the height of the container.
html {
height:100%;
}
我的解决方案是将主体的高度设置为与容器的高度相同。
html { 高度：100%; }
body {
height:96%; /* 100% * (pageContainer*2) */
margin-top:0%;
padding:0%;
}
#pageContainer {
position:relative;
width:96%; /* 100% - (margin * 2) */
height:96%; /* 100% - (margin * 2) */
margin:2% auto 0% auto;
padding:0%;
}
I haven't tested it in every browser, but this seems to work.
我没有在每个浏览器中测试过它，但这似乎有效。
回答by RoryG
Here is the code that everyone was asking for -- its at the very beginning of development so there isn't much in it yet, which may be helpful...
这是每个人都要求的代码 - 它在开发的最初阶段，所以还没有太多，这可能会有所帮助......
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- TemplateBeginEditable name="doctitle" -->
<title></title>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" --><!-- TemplateEndEditable -->
<link href="../Styles/KB_styles1.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="mainContainer">
<div class="header"> </div>
<div class="mainContent"> </div>
<div class="footer"> </div>
</div>
</body>
</html>
Here is the css:
这是CSS：
@charset "utf-8";
/* CSS Document */
body{
margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px;
padding: 0;
color: black; font-size: 10pt; font-family: "Trebuchet MS", sans-serif;
background-color: #E2E2E2;}
html{padding: 0; margin: 0;}
/* ---Section Dividers -----------------------------------------------*/
div.mainContainer{
height: auto; width: 68em;
background-color: #FFFFFF;
margin: 0 auto; padding: 0;}
div.header{padding: 0; margin-bottom: 1em;}
div.leftSidebar{
float: left;
width: 22%; height: 40em;
margin: 0;}
div.mainContent{margin-left: 25%;}
div.footer{
clear: both;
padding-bottom: 0em; margin: 0;}
/* Hide from IE5-mac. Only IE-win sees this. \*/
* html div.leftSidebar { margin-right: 5px; }
* html div.mainContent {height: 1%; margin-left: 0;}
/* End hide from IE5/mac */
回答by Krii
Try margin -10px:
尝试边距-10px：
body { margin-top:-10px; }
回答by Jakub Sawczuk
The same issue has been driving me crazy for several hours. What I found and you may want to check is html encoding. In my html file I declared utf-8 encoding and used Notepad++ to enter html code in utf-8 format. What I DID forget of was UTF-8 BOM and No BOM difference. It seems when utf-8 declared html file is written as UTF-8 BOM there is some invisible extra character at the begining of the file. The character (non-printable I guess) effects in one row of "text" at the top of the rendered page. And you cannot see the difference in source-view of the browser (Chrome in my case). Both nice and spoiled files seem identical to the very character, still one of them renders nicely and the other one shows this freaking upper margin.
同样的问题已经让我发疯了几个小时。我发现并且您可能想要检查的是 html 编码。在我的 html 文件中，我声明了 utf-8 编码并使用 Notepad++ 以 utf-8 格式输入 html 代码。我确实忘记了 UTF-8 BOM 和 No BOM 差异。当 utf-8 声明的 html 文件被写为 UTF-8 BOM 时，文件开头似乎有一些不可见的额外字符。字符（我猜是不可打印的）在渲染页面顶部的一行“文本”中起作用。而且您看不到浏览器（在我的情况下为 Chrome）的源视图中的差异。好的文件和损坏的文件似乎都与角色完全相同，但其中一个渲染得很好，而另一个显示了这个该死的上边距。
To wrap it up the solution is to convert the file to UTF-8 NO BOM and one can do it in i.e. Notepad++.
总结一下，解决方案是将文件转换为 UTF-8 NO BOM，并且可以在 ie Notepad++ 中完成。
