html - 我有两个 div，它们的边距都设置为 0，但它们之间有一个空格

Question

我正在学习 CSS 和网页设计，我正在尝试了解如何组织简单网站的基础知识。

理想情况下，我希望主导航和主要内容之间没有空格。不幸的是，它们之间有一个空间，看起来即使将两个 div 的边距都设置为 0 也无法修复(我最初认为这只是边距折叠)。

body {
  background-color: black;
  margin: 0 0 0 0;
}

#main-nav {
  height: 37px;
  width: 100%;
  overflow: hidden;
  background-color: blue;
  margin: 0 0 0 0;
}

#main-content {
  height: 100px;
  width: 100%;
  background-color: red;
  margin: 0 0 0 0;
}

p {
  color: lime;
}

<div id="main-nav">
  <p>This is just a demonstration of my problem.</p>
</div>
<div id="main-content">
  <p>This is just a demonstration of my problem.</p>
</div>

Answer 1

因为p元素标签有一个空格。浏览器为所有元素设置默认边距和填充。您可以将 HTML 重置添加到您的代码中以避免它。

您可以查看 - HTML5 Reset

这是未经重置的修改后的代码。

body {
    background-color: black;
    margin: 0 0 0 0;
}
#main-nav {
    height: 37px;
    width: 100%;
    overflow: hidden;
    background-color: blue;
    margin: 0 0 0 0;
}
#main-content {
    height: 100px;
    width: 100%;
    background-color: red;
    margin: 0 0 0 0;
}
p {
    color: lime;
    margin:0
}

<div id="main-nav">
    <p>This is just a demonstration of my problem.</p>
</div>
<div id="main-content">
    <p>This is just a demonstration of my problem.</p>
</div>