如何删除网页中的上边距？-Java 学习之路

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

16 回答

body{
margin:0;
padding:0;
}

<span>Example</span>

回复于 2024-04-28T12:12:32+08:00

0
我有同样的问题 . 对我来说，这是唯一有效的方法：
```
div.mainContainer { padding-top: 1px; }
```
它实际上适用于任何不具备CSS和HTML知识的数字，而且似乎违反直觉 . 将 body, html, h1 边距和填充设置为0对我没有影响 . 我的页面顶部还有一个 h1
回复于 2024-04-28T12:12:32+08:00
27
我有类似的问题，通过以下CSS解决了这个问题：
```
body {    
    margin: 0 !important;
    padding: 0 !important;
}
```
回复于 2024-04-28T12:12:32+08:00
0

你的第一个元素是 h1 还是类似的？那个元素的 margin-top 可能会导致 body 上看起来像是一个边缘 .

回复于 2024-04-28T12:12:32+08:00
10
重置所有元素边距的最佳方法是使用css星号规则 .

将其添加到@charset下的css顶部：
```
* {
   margin: 0px;
   padding: 0px;
}
```
这将取消所有预设的边距和填充所有元素body，h1，h2，p等 . 现在，您可以使用浏览器刷新页面的顶部或 Headers 以及其他div中的任何图像或文本 .
回复于 2024-04-28T12:12:32+08:00

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

我希望这可以帮助所有开发人员，这对我来说在我学习的过程中有些困扰 .

回复于 2024-04-28T12:12:32+08:00

0
您可以使用以下方法阻止margin collapsing的影响：
```
body { overflow: hidden }
```
这将使 body 保证金保持准确 .
回复于 2024-04-28T12:12:32+08:00
1
我有同样的问题 . 它是通过跟随css线来解决的;
```
h1{margin-top:0px}
```
我的主要div在开头包含 h1 标签 .
回复于 2024-04-28T12:12:32+08:00

我一直有类似的问题 . 我想要一个百分比高度和我的容器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%;
}

我没有在每个浏览器中测试它，但这似乎工作 .

回复于 2024-04-28T12:12:32+08:00

这是每个人都要求的代码 - 它在开发的最初阶段，所以它还没有多少，这可能会有所帮助......

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

回复于 2024-04-28T12:12:32+08:00

1
尝试保证金 -10px ：
```
body { margin-top:-10px; }
```
回复于 2024-04-28T12:12:32+08:00
1

同样的问题让我疯了几个小时 . 我发现你可能要检查的是html编码 . 在我的html文件中，我声明了utf-8编码并使用记事本以utf-8格式输入html代码 . 我忘记的是UTF-8 BOM和无BOM差异 . 似乎当utf-8声明的html文件被写为UTF-8 BOM时，在文件的开头有一些看不见的额外字符 . 字符（我猜不可打印）在渲染页面顶部的一行“文本”中产生影响 . 而且您无法看到浏览器的源视图中的差异（在我的情况下是Chrome） . 好的和被破坏的文件看起来都与这个角色相同，但其中一个渲染得很好，而另一个则显示出这个怪异的上边距 .

为了解决这个问题，解决方案是将文件转换为UTF-8 NO BOM，并且可以在记事本中进行 .

回复于 2024-04-28T12:12:32+08:00
4
对于opera，只需在 Headers 中添加即可
```
<link rel='stylesheet' media='handheld' href='body.css' />
```
这使得Opera使用了大部分定制的CSS .
回复于 2024-04-28T12:12:32+08:00
0
```
style="text-align:center;margin-top:0;" cz-shortcut-listen="true"
```
粘贴在你的身体标签上！

这将删除上边距
回复于 2024-04-28T12:12:32+08:00
51
我尝试了几乎所有的在线技术，但我仍然在我的网站上有顶级空间，当我用Opera迷你手机浏览器打开它时，所以我决定尝试自己修复它，我做对了！

我意识到即使你在一个布局中显示一个页面，它适合网站到屏幕，并且一些css功能被禁用，因为你自动禁用边距，填充，浮动和位置功能适合屏幕，身体总是在顶部添加内置填充物 . 所以我决定寻找至少一个有效的功能，猜怎么着？ “显示” . 让我来告诉你怎么做！
```
<html>
<head>
<style>
body {
display: inline;
}

#top {
display: inline-block;
}
</style>
</head>
<body>
<div id="top">



eg: <div id="header"></div>
<div id="container"></div> and so on..



</div>
</body>
</html>
```
如果您注意到，正文{display：inline;}删除了正文中的内置填充，但没有#top {display：inline-block;}，div仍然无法正常显示，因此您必须在任何代码之前包含 <div id="top"> 元素在你的页面上！这么简单..希望这有帮助吗？如果有效，你可以感谢我，http://www.facebook.com/exploxi
回复于 2024-04-28T12:12:32+08:00
2
您还可以检查是否：
```
{float: left;}
```
和
```
{clear: both;}
```
在你的CSS中正确使用 .
回复于 2024-04-28T12:12:32+08:00

如何删除网页中的上边距？

16 回答

相关问题