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

【问题标题】：How do I remove the top margin in a web page?如何删除网页中的上边距？
【发布时间】：2011-01-30 03:37:45
【问题描述】：

我创建的每个网页都有这个问题。我用来将内容放在页面中心的“主容器”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中存在margin。

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

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

【问题讨论】：

  • 我没有看到任何奇怪的地方。您能否将此作为 SSCCE 重新发布？ sscce.org，从&lt;doctype&gt; 和&lt;html&gt; 直到&lt;/html&gt; 具有最小 所需的样式表以在&lt;style&gt; 元素中重现相同的问题。
  • 感谢您的帮助 - 我想我找到了问题所在。段落边距似乎正在转移到 div。当我将 p{margin: 0;} 添加到 css 时，问题就消失了。
  • @RoryG，请将您的解决方案作为答案发布在下面并接受您自己的答案。如您所见，这对仍在尝试回答您的原始问题的人最有帮助。

标签： html css


【解决方案1】：

你的第一个元素是h1 还是类似的？该元素的margin-top 可能会导致body 上的空白。

【讨论】：

  • 你成功了，这也是我的问题，在这种情况下使用重要！就像在接受的答案中建议的那样并不能解决它（并且基于发布问题的人的 cmets 这也是 his 问题，但使用

    标签而不是

    ）。

  • 在 chrome 中检查网页时，该页边距出现在正文之外，但正文内部有一个子组件（角度），它在顶部使用 &lt;p&gt;&lt;/p&gt; 标签，这确实导致了问题。不能盲目信任 Chrome 检查工具。
  • 非常感谢！在过去的几个小时里，我一直在摸索这个问题。如果可以的话，我会给你 100 票！
【解决方案2】：

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

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

【讨论】：

    【解决方案3】：

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

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

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

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

    【讨论】：

    • 最好调整合适的标签，比如

      或

      ，而不是绕着问题走，途中会引起很多其他问题。
    • 这是我的解决方案。奇怪的是 HTML 以 html 和 body 标记开头。他们在顶部留出空白。将 html 和 body 指定为 padding/margin: 0. 没有帮助。但星号确实如此。虽然我在顶部找不到任何其他标签。
    【解决方案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;
}

    我希望这对所有开发人员有所帮助，这是我在学习时遇到的问题。

    【讨论】：

    • html {margin: 0px;} 解决了问题（这是如何删除 html 边距）。你这个男人。
    • 不错的解决方案。
    【解决方案5】：

    您可以通过以下方式防止margin collapsing 的影响：

    body { overflow: hidden }

    这将使body 边距保持准确。

    【讨论】：

    • 是的，这几乎可以肯定是一个崩溃的保证金问题。设置 margin:0 !important 不会有帮助。但是设置 body {overflow:auto} 将修复它而不会产生任何负面影响。这应该被标记为正确答案。
    【解决方案6】：

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

    h1{margin-top:0px}

    我的主 div 开头包含 h1 标签。

    【讨论】：

      【解决方案7】：

      我也遇到过类似的问题。我想要我的容器 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%;
}

      我没有在每个浏览器中都测试过，但这似乎可行。

      【讨论】：

        【解决方案8】：

        同样的问题已经让我发疯了几个小时。我发现并且您可能想要检查的是 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++ 中完成。

        【讨论】：

          【解决方案9】：

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

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

          【讨论】：

          • 无法在任何浏览器中重现问题。
          • 感谢您提供有关将其放置在何处的提示。我不知道该怎么办。我现在添加它。
          【解决方案10】：

          试试边距-10px：

          body { margin-top:-10px; }

          【讨论】：

          • 这个工作了 4 我，其他建议没有......奇怪的是不明白为什么
          • 这是不好的做法。我是几年前写的，当时我还不太了解 Web 开发。找到问题的根源比隐藏它要好得多。
          【解决方案11】：

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

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

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

          【讨论】：

            【解决方案12】：

            它是一个&lt;p&gt; 元素，用于创建上边距。您删除了除该元素之外的所有上边距。

            【讨论】：

              【解决方案13】：

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

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

              它实际上适用于任何不为零的数字。我真的不知道为什么会这样。我对 CSS 和 HTML 不是很了解，这似乎违反直觉。将 body, html, h1 边距和填充设置为 0 对我没有影响。我的页面顶部还有一个h1

              【讨论】：

                【解决方案14】： 

                body{
margin:0;
padding:0;
}
                &lt;span&gt;Example&lt;/span&gt;

                【讨论】：

                  【解决方案15】：

                  我几乎尝试了所有在线技术，但我仍然获得了我网站的顶部空间，每当我用opera mini手机浏览器打开它时，我决定尝试自己修复它，我做对了！

                  我意识到，即使您以单一布局显示页面，它也会使网站适合屏幕，并且某些 css 功能被禁用，因为当您适合屏幕时，边距、填充、浮动和位置功能会自动禁用，并且身体总是在顶部添加内置填充。所以我决定寻找至少一个有效的功能，你猜怎么着？ “展示”。让我告诉你怎么做！

                  <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;} 会删除 body 中的内置填充，但没有 #top{display:inline-block;}，div 仍然无法正常显示，因此您必须包含 @987654323 @ 页面上任何代码之前的元素！这么简单..希望这有帮助吗？如果它有效，你可以感谢我，http://www.facebook.com/exploxi

                  【讨论】：

                    【解决方案16】：

                    您也可以检查是否：

                    {float: left;}

                    和

                    {clear: both;}

                    在您的 css 中正确使用。

                    【讨论】：

                      【解决方案17】：

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

                      【讨论】：

                        【解决方案18】： 
                        style="text-align:center;margin-top:0;" cz-shortcut-listen="true"

                        把这个粘贴到你的body标签上！

                        这将删除上边距

                        【讨论】：

                          猜你喜欢
                          • 1970-01-01
                          • 2015-01-13
                          • 2016-11-19
                          • 2012-01-17
                          • 1970-01-01
                          • 1970-01-01
                          • 2018-05-04
                          • 1970-01-01
                          • 2014-02-27
                          相关资源
                          最近更新 更多
                          热门标签
                          Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode