如何删除网页的上边距？

Question

我创建的每个网页都遇到过这个问题。我用来将内容放置在页面中心的“主容器”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;
}

我在网上查了很多次，但我所能做的就是设置这些边距和填充属性。还有什么我应该做的吗？ IE 和 Firefox 中存在边距。

这里是对代码的更彻底的了解（它处于创建的开始阶段，所以里面没有太多内容......）

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

Answer 1

您的第一个元素是

h1

或类似元素吗？该元素的

margin-top

可能会导致

body

上出现边距。

Answer 2

我有类似的问题，通过以下 CSS 解决了这个问题：

body {    
    margin: 0 !important;
    padding: 0 !important;
}

Answer 3

重置所有元素边距的最佳方法是使用 css 星号规则。

将其添加到 CSS 顶部的 @charset 下：

* {
   margin: 0px;
   padding: 0px;
}

这将消除所有元素 body、h1、h2、p 等的所有预设边距和填充。现在，您可以使页面的顶部或页眉以及其他 div 中的任何图像或文本与浏览器齐平。

Answer 4

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;
}

我希望这对所有开发人员有所帮助，这是我在学习时困扰我一段时间的事情。

Answer 5

您可以通过以下方式防止边距崩溃的影响：

body { overflow: hidden }

这将使

body

边距保持准确。

Answer 6

我也有同样的问题。它已通过以下 css 行解决；

h1{margin-top:0px}

我的主 div 在开头包含

h1

标签。

Answer 7

尝试边距-10px：

body { margin-top:-10px; }

Answer 8

我也遇到过类似的问题。我想要容器 div 的百分比高度和上边距，但主体将占据容器 div 的边距。我想我找到了解决方案。

这是我原来的（问题）代码：

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%;
}

我的解决方案是将主体的高度设置为与容器的高度相同。
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%;
}

我还没有在每个浏览器中测试过它，但这似乎有效。

Answer 9

同样的问题已经让我发疯了几个小时。我发现你可能想检查的是 html 编码。在我的html文件中，我声明了utf-8编码，并使用Notepad++以utf-8格式输入html代码。我确实忘记了 UTF-8 BOM 和 No BOM 的区别。当 utf-8 声明的 html 文件被写入 UTF-8 BOM 时，文件的开头似乎有一些不可见的额外字符。该字符（我猜是不可打印的）在渲染页面顶部的一行“文本”中起作用。而且你看不到浏览器（在我的例子中是 Chrome）源视图中的差异。漂亮的文件和损坏的文件看起来都与角色完全相同，但其中一个渲染得很好，另一个显示了这个可怕的上边距。

总结起来，解决方案是将文件转换为 UTF-8 NO BOM，可以在 Notepad++ 中完成。

Answer 10

这是每个人都要求的代码——它处于开发的最开始阶段，所以还没有太多内容，这可能会有所帮助......

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

Answer 11

对于歌剧只需将其添加到标题中

<link rel='stylesheet' media='handheld' href='body.css' />

这使得 Opera 可以使用大部分自定义 CSS。

Answer 12

它是一个创建上边距的

<p>

元素。您删除了除该元素之外的所有上边距。

Answer 13

同样的问题，h1 导致其具有巨大的边距顶部。之后你可以使用 body{margin: 0;} ，它看起来不错。另一种方法是使用 *{margin: 0;} 但它可能会弄乱其他元素的边距。

Answer 14

我也遇到了同样的问题。对我来说，这是唯一有效的方法：

div.mainContainer { padding-top: 1px; }

它实际上适用于任何非零的数字。我真的不知道为什么会这样。我对 CSS 和 HTML 不太了解，这似乎违反直觉。将

body, html, h1

边距和填充设置为 0 对我来说没有任何效果。我的页面顶部还有一个

h1

Answer 15

body{
margin:0;
padding:0;
}

<span>Example</span>

Answer 16

您还可以检查是否：

{float: left;}

和

{clear: both;}

在你的CSS中正确使用。

Answer 17

好的，所以如果你有一个 h1 元素，其边距或填充大于 0，你希望包裹元素的样式为：overflow:hidden。有时，将其应用于正文是行不通的，因为包含 h1 或 p 元素的元素可能是 div。

包装元素可以是 main、div 或其他元素。

Answer 18

style="text-align:center;margin-top:0;" cz-shortcut-listen="true"

将此粘贴到您的身体标签上！

这将删除上边距

如何删除网页的上边距？

问题描述投票：0回答：18

18个回答

最新问题

如何删除网页的上边距？

问题描述 投票：0回答：18

18个回答

最新问题

问题描述投票：0回答：18