<div>元素不在它的<div>容器的顶部

Question

我在另一个（leftBar）中有一个div元素（innerBar），除非我指定innerBar的边框有一些宽度，否则innerBar不会从leftBar的顶部开始。

如何解决此问题？

.leftBar {
  width: 10%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  border: 1px solid red;
}

.innerBar {
  width: 100%;
  height: 100%;
  background-color: lightblue;
  border: 1px solid yellow;
}

<div class="leftBar">
  <div class="innerBar">
    <p>Some Text</p>
  </div>
</div>

Answer 1

根本没有必要将嵌套元素放在文档流之外。

此行为是在嵌套的margin元素（特别是p属性）上声明的默认margin-top属性的结果，可以通过以下任一方法进行纠正：

1. 删除嵌套margin标记上的p属性：
   

   .innerBar p {
       margin-top: 0;
   }
   

   ＆＃13;

   ＆＃13;

   * {
     box-sizing: border-box;
   }
   
   .leftBar {
     width: 10%;
     height: 100%;
     position: fixed;
     top: 0;
     left: 0;
     border: 1px solid red;
   }
   
   .innerBar {
     width: 100%;
     height: 100%;
     background-color: lightblue;
     /* additional */
     display: inline-block;
     vertical-align: top;
   }

   ＆＃13;

   <div class="leftBar">
     <div class="innerBar">
       <p>Some Text</p>
     </div>
   </div>

   ＆＃13;

   ＆＃13;
   ＆＃13;

2. 在嵌套元素上声明以下附加属性 （innerBar）：

   .innerBar {
       width: 100%;
       height: 100%;
       background-color: lightblue;
       /* border: 1px solid yellow; */
       /* additional */
       display: inline-block;
       vertical-align: top;
   }
   

＆＃13;
＆＃13;
* {
  box-sizing: border-box;
}

.leftBar {
  width: 10%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  border: 1px solid red;
}

.innerBar {
  width: 100%;
  height: 100%;
  background-color: lightblue;
}

.innerBar p {
  margin: 0px;
}
＆＃13;
<div class="leftBar">
  <div class="innerBar">
    <p>Some Text</p>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

Answer 2

好的，我只是将内容添加到innerBar：

position: absolute;