изменение верхнего предела влияет на других - PullRequest
Новая
       11

изменение верхнего предела влияет на других

0 голосов
/ 02 июня 2018

Когда я увеличиваю или уменьшаю 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;
}
<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>

1 Ответ

0 голосов
/ 02 июня 2018

Вы столкнулись с проблемой разрушения полей .Поскольку вы сделали header элементом с плавающей точкой, #nav станет первым элементом в потоке, поэтому его поле будет уменьшаться вместе с полем тела.

верхнее поле блока и верхнее поле его первого дочернего потока

Таким образом, когда вы увеличиваете поле навигации, вы увеличиваете свернутое поле, которое являетсяполя тела, и вы толкаете все содержимое вниз, включая #header.

. Чтобы это исправить, вам нужно избежать сворачивания поля, добавив (например) padding-top к body. 

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