如何删除网页中的顶部边距？
我已经创build了每个网页都有这个问题。 “主容器”div上方总有一个顶部边距，用于将我的内容放置在页面的中心。 我正在使用一个CSS样式表，并已设置边距和填充在身体0px，并设置边距和填充0在div：
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; } 我在网上看了很多次，但我所能做的就是设置这些边距和填充属性。 还有什么我应该做的？ IE和Firefox都有这个余地。
这是一个更彻底的看代码（这是在创build的开始阶段，所以没有太多的…）
<!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>
这是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 */
我有类似的问题，得到了解决以下CSS：
body { margin: 0 !important; padding: 0 !important; }
你的第一个元素是h1还是类似的？ 该元素的margin-top可能会导致似乎是一个body边缘。
为所有元素重置边距的最佳方法是使用css星号规则。
把这个添加到@charset下的css顶部：
* { margin: 0px; padding: 0px; }
这将带走所有预设的边界和填充所有元素体，h1，h2，p等。 现在，您可以将页面的顶部或页眉与浏览器一起与其他div中的任何图像或文本一起刷新。
CSS中的很多元素都有默认的填充和边距设置。 所以，当你开始build立一个新的站点时，准备好一个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; }
我希望这有助于所有的开发人员在我学习的时候有一段时间对我有所帮助。
您可以通过以下方式防止边距崩溃的影响：
body { overflow: hidden }
这将使body利润保持准确。
我有同样的问题。 这是通过下面的CSS来解决的;
h1{margin-top:0px}
我的主要div在开始时包含h1标签。
我一直有类似的问题。 我想为我的容器div的百分比高度和顶部边缘，但身体会承担容器div的边缘。 我想我想出了一个解决scheme。
这是我的原始（问题）代码：
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%; }
我的解决scheme是将身体的高度设置为与容器的高度相同。
html {height：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%; }
我没有在每个浏览器中testing它，但是这似乎工作。
这里是每个人都要求的代码 – 它在开发的一开始，所以没有太多，这可能是有帮助的…
<!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>
这是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 */
尝试保证金-10px ：
body { margin-top:-10px; }
同样的问题已经让我疯狂了好几个小时。 我发现，你可能要检查的是HTML编码。 在我的html文件中，我声明了utf-8编码，并使用Notepad ++以utf-8格式inputhtml代码。 我忘记了UTF-8 BOM和没有BOM差异。 看来当utf-8声明的html文件被写为UTF-8 BOM时，在文件开始的时候会有一些不可见的额外字符。 字符（我猜不可打印）在渲染页面顶部的一行“文本”中产生效果。 而且你不能在浏览器的源代码视图中看到不同（在我的情况下是Chrome）。 好的和被宠坏的文件看起来都与这个angular色完全一样，但其中一个很好地呈现，另一个则显示这个怪异的上边缘。
解决scheme是将文件转换为UTF-8无BOM，可以在Notepad ++中完成。
style="text-align:center;margin-top:0;" cz-shortcut-listen="true"
粘贴在你的身体标签！
这将删除顶部边距
我有这个完全相同的问题。 对我来说，这是唯一有效的工作：
div.mainContainer { padding-top: 1px; }
它实际上与任何不是零的数字一起工作。 我真的不知道为什么这个照顾它。 我不是很了解CSS和HTML，它似乎违反直觉。 设置body, html, h1边距和填充为0对我没有任何影响。 我的页面顶部也有一个h1
body{ margin:0; padding:0; }
<span>Example</span>
我尝试了几乎所有的在线技术，但是我仍然在我的网站上获得了顶级空间，当我用Opera迷你手机浏览器打开它时，我决定尝试修复它，并且我明白了！
我意识到即使你在一个布局中显示一个页面，它适合网页到屏幕上，并且一些CSS函数被禁用，因为当你适合屏幕时边缘，填充，浮动和位置function被自动禁用，并且身体始终在顶部添加内置填充。 所以我决定寻找至less一个有效的function，猜猜看是什么？ “显示”。 让我告诉你怎么做！
<html> <head> <style> body { display: inline; } #top { display: inline-block; } </style> </head> <body> <div id="top"> <!-- your code goes here! --> eg: <div id="header"></div> <div id="container"></div> and so on.. <!-- your code goes here! --> </div> </body> </html>
如果你注意到，body {display：inline;}删除了内部的内部填充，但没有#top {display：inline-block;}，div仍然不能很好的显示，所以你必须包含<div id="top">元素之前，您的网页上的任何代码！ 这么简单..希望这有助于？ 你可以感谢我，如果它的工作， http://www.facebook.com/exploxi
你也可以检查是否：
{float: left;}
和
{clear: both;}
在你的CSS中正确使用。
