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属性的结果，可以通过以下任一方法进行纠正：

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

.innerBar p {
    margin-top: 0;
}

＆＃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;

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

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

＆＃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;

Answer 2

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

position: absolute;

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

2 个答案: