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

Question

我在另一个（左键）内有一个div元素（innerbar），除非我指定了内栏的边框具有一定的宽度，否则内栏不在左栏的顶部开始。

如何解决此问题？

.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

根本不需要将嵌套元素放在文档流中。

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

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

   .innerBar p {
       margin-top: 0;
   }
   

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

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

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

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

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

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

Answer 2

好的，我只添加到innerbar属性：

position: absolute;