如何在html中的body和div元素之间没有空格[重复]答案

【问题标题】：How to have no space between body and div element in html [duplicate]如何在html中的body和div元素之间没有空格[重复]
【发布时间】：2020-12-09 06:40:38
【问题描述】：

我正在制作一个顶部导航，我不想在 body 和 div 元素之间留出空间。

我想看起来像那样。但问题是，我不知道如何“删除”或“移除”正文和 <div> 元素之间的空间。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> Why Linux is just better than Windows - Ring Tips </title>
    <link rel="icon" href="linux.png">
</head>
<body>
     <style>
          body {
               background: #484d49;
               padding: 0;
               -webkit-font-smoothing: antialised;
          }
          .topnav {
               top: 0;
               position: sticky;
               background: #a5b0a8;
               border: 0.5px solid black;
               width: 100%;
               height: 100px;
               overflow: hidden;
               z-index: 2;
          }
     </style>
     <div class="topnav"></div>

</body>
</html>

这就是我所做的，但是如何使用 CSS 或 JavaScript 删除元素之间的空间。

如果你能帮忙，那就太好了。

谢谢，

擂台游戏

【问题讨论】：

标签： javascript html css

【解决方案1】：

您可以通过将其设置为 margin-top:0; 来移除正文的上边距。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> Why Linux is just better than Windows - Ring Tips </title>
    <link rel="icon" href="linux.png">
</head>
<body>
     <style>
          body {
               margin-top:0;
               background: #484d49;
               padding: 0;
               -webkit-font-smoothing: antialised;
          }
          .topnav {
               top: 0;
               position: sticky;
               background: #a5b0a8;
               border: 0.5px solid black;
               width: 100%;
               height: 100px;
               overflow: hidden;
               z-index: 2;
          }
     </style>
     <div class="topnav"></div>

</body>
</html>

【讨论】：

这就是为什么我在我的解决方案中将边距和填充设置为 0 的原因....您的解决方案在顶部导航的左侧和右侧有空间...我的没有:)
OP 想要删除 body 的所有边距，因为他的导航栏不仅连接到顶部，还连接到 body 的侧面
这行得通 :) 非常感谢。
@RingGamesCompany 不客气。请考虑通过单击答案左上角的复选标记将其标记为“该”答案。

【解决方案2】：

您的样式声明需要在页面的头部 - 而不是正文。而且因为大多数浏览器的 html 和 body 都设置了一些空间 - 你应该将 margin 和 padding 都设置为 0。

另外 - 您应该研究用于导航和主的语义元素 - 例如 <nav> ... </nav> 和 <main> ... </main> 以使代码尽可能好。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> Why Linux is just better than Windows - Ring Tips </title>
    <link rel="icon" href="linux.png">
     <style>
        html, body {
          height: 100%; 
          padding: 0;
          margin: 0;
        }
          body {
               background: #484d49;
               color: #fff;
               padding: 0;
               -webkit-font-smoothing: antialised;
          }
          .topnav {
               top: 0;
               position: sticky;
               background: #a5b0a8;
               border: 0.5px solid black;
               width: 100%;
               height: 100px;
               overflow: hidden;
               z-index: 2;
               padding: 8px
          }
           .main-content {
               height: 100%;
               padding: 8px
          }
     </style>
</head>
<body>
     <div class="topnav">This is the navigation</div>
     <div class="main-content">This is main-content</div>
</body>
</html>

【讨论】：

更好的是，body { margin-top:0; }，因为您的代码将删除所有边距，这可能是不希望的。填充不是造成不想要的空间的原因，因为它控制元素内的空间，而不是元素外的空间。

【解决方案3】：

您可以使用边距来删除正文和正文内的东西之间的空间而不是填充。

body {
  margin: 0;
}

【讨论】：

更好的是body { margin-top:0; }，因为您的代码将删除所有边距，这可能是不希望的。
其实我非常喜欢使用 margin: 0 0 0 0;如果您想更改侧边距和底边距，您仍然可以插入它们，并且总体上使用更少的行和空间。
@tacoshy 这通常被认为是糟糕的页面设计，原因与书籍在文本的所有四个边都有边距相同。它更容易阅读。
实际上并不取决于您想要实现的目标。没有正文边距并不意味着您最终没有到屏幕边框的空间。除了为所有 4 个边添加边距之外，您还可以根据需要定义所有 4 个边的 amrgin，这是我的实际观点。