Question

当我增加或减少margin-top #nav时，它会影响#header，但当margin-top增加#header时，它不会影响#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; } 1}}。

当我改变导航或标题是否不影响其他人时，如何纠正这个问题？

＆＃13;

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

＆＃13;

{{1}}

＆＃13;

Answer 1

您正面临margin-collapsing问题。由于您将header设置为float元素，#nav成为第一个in-flow元素，因此其边距将随着body margin而崩溃。

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

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

要解决此问题，您需要通过向padding-top添加（例如）body来避免边距折叠。

＆＃13;

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

＆＃13;

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

＆＃13;

改变保证金最高影响他人

1 个答案: