更改 margin-top 会影响其他人答案

【问题标题】：changing margin-top affects others更改 margin-top 会影响其他人
【发布时间】：2018-06-03 06:13:56
【问题描述】：

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

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

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>

【问题讨论】：

因为 nav 在 header 元素内，所以增加 margin 也会改变 header 的高度
@Manjunath nav 不在标题内，但存在边距折叠问题
啊！我没有注意到关闭的 div。我的坏':)

标签： css html margin

【解决方案1】：

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

一个盒子的上边距和它的第一个流入子的上边距

因此，当您增加导航的边距时，您会增加折叠边距，即正文的边距，并且您会将所有内容向下推，包括 #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>

【讨论】：