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

Question

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

理想情况下，我希望主导航和主要内容之间没有空格。不幸的是，它们之间有一个空间，甚至可以将div的两个边距设置为0并不会修复（我原本认为它只是边缘的collasping）。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

由于p元素标记，有一个空格。浏览器为所有元素设置默认边距和填充。您可以在代码中添加HTML重置以避免它。

您可以查看 -

这是您修改后的代码，没有重置。

＆＃13;

＆＃13;

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

＆＃13;

{fixed Item : min(sale_date)}

＆＃13;

＆＃13;

＆＃13;

Answer 2

关注 CSS 代码

* {
 box-sizing: border-box;
}
* {
  margin: 0;
  padding: 0;
 }

body {
   background-color: black;
}

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

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

 p {
  color: lime;
 }

Answer 3

添加此css：

.main-nav p,
.main-content {
    margin:0;
}