改变 margin-top 会影响其他人

Question

当我增加或减少 #nav 的 margin-top 时，它会影响 #header，但是当我增加 #header 的 margin-top 时，它不会影响 #nav.

当我更改导航或 header 它不应该影响其他时，如何更正此问题？

body {
  width: 960px;
  margin: auto;
  color: #000000;
  background-color: #fff;
}

h1 {
  margin: 0;
  padding: 5px;
}

#header {
  float: left;
  color: #000000;
  font-size: 20px;
  margin-top: 10px;
}

#header h1 {
  float: left;
}

#nav {
  width: 900px;
  ;
  height: 20px;
  position: relative;
  margin-top: 34px;
}

#nav li {
  display: inline;
  float: left;
}

<div id="header">
  <h1>rrrr</h1>

</div>

<div id="nav">
  <ul>
    <li><a href="#">sss</a></li>
    <li><a href="#">www</a></li>
    <li><a href="#">fff</a></li>
    <li><a href="#">ttt</a></li>
  </ul>
</div>

Answer 1

您遇到了 margin-collapsing 问题。由于您将 header 设为浮动元素，因此 #nav 成为第一个流入元素，因此其边距将与主体边距一起折叠。

top margin of a box and top margin of its first in-flow child

因此，当您增加导航的边距时，您会增加折叠的边距，即正文的边距，并将所有内容向下推，包括 #header。

要解决此问题，您需要通过在 body.

中添加（例如）padding-top 来避免边距崩溃

body {
  width: 960px;
  margin: auto;
  color: #000000;
  background-color: #fff;
  padding-top: 1px;
}

h1 {
  margin: 0;
  padding: 5px;
}

#header {
  float: left;
  color: #000000;
  font-size: 20px;
  margin-top: 10px;
}

#header h1 {
  float: left;
}

#nav {
  width: 900px;
  ;
  height: 20px;
  position: relative;
  animation: ani1 2s;
  margin-top: 34px;
}

#nav li {
  display: inline;
  float: left;
}

<div id="header">
  <h1>rrrr</h1>
</div>
<div id="nav">
  <ul>
    <li><a href="#">sss</a></li>
    <li><a href="#">www</a></li>
    <li><a href="#">fff</a></li>
    <li><a href="#">ttt</a></li>
  </ul>
</div>

改变 margin-top 会影响其他人

changing margin-top affects others

html

css

margin