html - Div 之间无法解释的空间

Question

下面是 HTML 和 CSS。 Div id“black”似乎在它自己和它上面的“brown”div 之间增加了一个空间。当我删除“黑色”div 时，多余的空间消失了。我的所有边距和填充都为零。无法弄清楚是什么原因造成的。任何建议表示赞赏。

html {
  padding: 0;
  margin: 0;
}
body {
  font-size: 62.5%;
  margin: 0;
  padding: 0;
  text-align: center;
  font-family: raleway;
  font-style: normal;
  font-weight: 400;
  color: #000000;
}
#greyWrapper {
  background-color: #303030;
  margin: 0;
  padding: 0;
  width: 100%;
  color: #FFFFFF;
  height: auto;
}
#Brown {
  margin: 0px;
  padding: 0px;
  width: 100%;
  height: auto;
  background-color: #644015;
}
#Brown ul {
  text-decoration: none;
  list-style-type: none;
  text-transform: uppercase;
  font-size: 0.7em;
  margin: 0;
  padding: 0;
}
#Brown ul li {
  display: inline-block;
  padding-top: 5px;
  padding-right: 10px;
  padding-bottom: 5px;
  padding-left: 10px;
}
#black {
  background-repeat: no-repeat;
  margin: 0px;
  padding: 0px;
  width: 100%;
  background-color: #000000;
  height: auto;
}

<div id="greyWrapper">
  <div id="Brown">
    <ul>
      <li>Home</li>
      <li>About</li>
      <li>Portfolios</li>
      <li>Team</li>
      <li>Blog</li>
      <li>Contact</li>
    </ul>
  </div>
  <div id="black">
    <p>Grab Your Copy Of</p>
    <p>The Premium Quality PSD Template</p>
    <p>For free Download</p>
  </div>
</div>

Answer 1

您的 p 有一个边距，这个边距超出了 #black div 的限制并“推向” #brown分区Why does this CSS margin-top style not work? 中有很好的解释

您可以:

• 在 #black 周围加上边框。边框将强制 div 扩展，以便它包含子项的所有边距。

#black {
    border: 1px solid black;
}

或

• 移除最上面段落的上边距

#black > p:first-child {
    margin-top: 0px;
}