html - DIV 不排队

Question

我创建了一个 jsfiddle 供您查看我在做什么。

https://jsfiddle.net/pksml/3mp1Lnw8/5/

#page-wrapper {
margin-left: 205px;
background-color: green;
}

菜单包装器(橙色)和页面包装器(绿色)都应该位于内容包装器(蓝色)的顶部。但是绿色 block 看起来有顶部边距(实际上没有)。

我的问题是:为什么橙色和绿色 block 不都排在蓝色 block 的顶部？

我的某些 CSS 代码有误吗？感谢您的意见!

Answer 1

它是 p 标签的默认 margin，它将绿色 div 向下推。

HTML {
  background: #cccccc;
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

#bounding-wrapper {
  min-width: 320px;
  width: 100%;
  padding: 10px;
}

#content-wrapper {
  width: 100%;
  margin: 0px;
  padding: 0px;
  overflow: auto;
  height: auto !important;
  background-color: blue;
}

#menu-wrapper {
  width: 200px;
  background-color: orange;
  float: left;
}

#page-wrapper {
  margin-left: 205px;
  background-color: green;
}
  p{
margin: 0 0 20px;
  }

<div id="bounding-wrapper">
  <div id="content-wrapper">
<div id="menu-wrapper">
  this is in the menu wrapper
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga dolores voluptatibus itaque dolor quod.</p>
</div>
<!-- menu wrapper -->
<div id="page-wrapper">
  <p>this is in the page wrapper</p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum repellendus eum delectus deserunt molestiae cum, 
</div>
<!-- page wrapper -->
  </div>
  <!-- content wrapper -->
</div>
<!-- bounding wrapper -->