Question

下面的HTML和CSS。 Div id“black”似乎正在推动它自身与它上方的“棕色”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 p {
    margin: 0
}

你会看到它消失。

Answer 2

你的p有一个保证金，这个保证金超出了#black div的范围，并且＆＃34;推动＆＃34; #brown div。在Why does this CSS margin-top style not work?

中有一个很好的解释

你可以：

在#black周围放置边框。边框将强制div扩展，以便它包含孩子们的所有边缘。

#black {
    border: 1px solid black;
}

或

删除最顶部段落的上边距

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

Div之间无法解释的空间

2 个答案: