父div中的子div为父div创建空格

Question

我不明白发生了什么，父div正在受到我想要添加到子div的边距的影响。它导致父div降低而不是留在原地并创建空格。我的错误在id为＃34; center＆＃34;。

的div中

＆＃13;

＆＃13;

* {
  padding: 0;
  margin: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
body {
  background-color: #57FFA6;
  color: #221F51;
  font-size: 62.5%;
  font-family: arial, sans-serif;
}
#header {
  background-color: white;
  display: block;
  height: 80px;
  position: relative;
}
#logo {
  display: block;
  float: left;
  margin-left: 115px;
  margin-top: 18px;
  padding: 0 auto;
  position: relative;
}
#navigationBar {
  display: block;
  float: right;
  margin-right: 115px;
  margin-top: 27px;
  padding: 0 auto;
  position: relative;
}
#navigationBar ul li {
  display: inline-block;
}
#navigationBar ul li a {
  color: black;
  font-family: arial, sans-serif;
  font-size: 1.5em;
  text-decoration: none;
  padding: 5px;
  position: relative;
}
#navigationBar ul li a:hover {
  color: gray;
}
#center {
  background-color: white;
  display: block;
  font-size: 1.6em;
  margin: 0 auto;
  padding: 0 auto;
  position: relative;
  width: 990px;
}
#articleOne {
  display: block;
  height: 200px;
  position: relative;
}
#articleOneTitle {
  display: block;
  margin: 50px;
  position: relative;
}

＆＃13;

<div id="header">
  <div id="logo">
    <img src="C:/Workspace/MyWeblogicWorkspace/Purify/WebContent/Images/logo.png" alt="logo" height="42" width="115">
  </div>
  <div id="navigationBar">
    <ul id="navigationBarList">
      <li><a href="http://www.google.com">Home</a>
      </li><b> ·</b>
      <li><a href="http://www.google.com">About</a>
      </li><b> ·</b>
      <li><a href="http://www.google.com">Schedule</a>
      </li><b> ·</b>
      <li><a href="http://www.google.com">Contact</a>
      </li>
    </ul>
  </div>
  <!-- end of navigationBar -->
</div>
<!-- end of header -->
<div id="center">
  <div id="articleOne">
    <p id="articleOneTitle">In-Home Repair</p>
  </div>
  <!-- end of articleOne -->
</div>
<!-- end of center -->
<div id="footer">

</div>
<!-- end of footer -->

＆＃13;

＆＃13;

＆＃13;

Answer 1

将overflow: auto;添加到#center - 很奇怪，但它可以解决问题......

＆＃13;

＆＃13;

* {
  padding: 0;
  margin: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
body {
  background-color: #57FFA6;
  color: #221F51;
  font-size: 62.5%;
  font-family: arial, sans-serif;
}
#header {
  background-color: white;
  display: block;
  height: 80px;
  position: relative;
}
#logo {
  display: block;
  float: left;
  margin-left: 115px;
  margin-top: 18px;
  padding: 0 auto;
  position: relative;
}
#navigationBar {
  display: block;
  float: right;
  margin-right: 115px;
  margin-top: 27px;
  padding: 0 auto;
  position: relative;
}
#navigationBar ul li {
  display: inline-block;
}
#navigationBar ul li a {
  color: black;
  font-family: arial, sans-serif;
  font-size: 1.5em;
  text-decoration: none;
  padding: 5px;
  position: relative;
}
#navigationBar ul li a:hover {
  color: gray;
}
#center {
  background-color: white;
  display: block;
  font-size: 1.6em;
  margin: 0 auto;
  padding: 0 auto;
  position: relative;
  width: 990px;
  overflow: auto;
}
#articleOne {
  display: block;
  height: 200px;
  position: relative;
}
#articleOneTitle {
  display: block;
  margin: 50px;
  position: relative;
}

＆＃13;

<div id="header">
  <div id="logo">
    <img src="C:/Workspace/MyWeblogicWorkspace/Purify/WebContent/Images/logo.png" alt="logo" height="42" width="115">
  </div>
  <div id="navigationBar">
    <ul id="navigationBarList">
      <li><a href="http://www.google.com">Home</a>
      </li><b> ·</b>
      <li><a href="http://www.google.com">About</a>
      </li><b> ·</b>
      <li><a href="http://www.google.com">Schedule</a>
      </li><b> ·</b>
      <li><a href="http://www.google.com">Contact</a>
      </li>
    </ul>
  </div>
  <!-- end of navigationBar -->
</div>
<!-- end of header -->
<div id="center">
  <div id="articleOne">
    <p id="articleOneTitle">In-Home Repair</p>
  </div>
  <!-- end of articleOne -->
</div>
<!-- end of center -->
<div id="footer">

</div>
<!-- end of footer -->

＆＃13;

＆＃13;

＆＃13;