javascript - 将 div 的顶部和边距设置为零

Question

我在一个 div 中有 2 个 div，我希望这 2 个 div 与父容器的顶部相距 0px，并且它们周围没有边距。

我尝试将 2 个 div 的位置设置为 relative，top 设置为 0px，margin 设置为 0px，但由于某种原因没有设置它们。

#firstOuter {
  border: 1px solid orange;
}
.outer {
  position: relative;
  top: 0;
  margin: 0;
  display: inline-block;
  border: 1px solid red;
}

<div id="firstOuter">

  <div class="outer">
    <div>
      one
    </div>
    <div>
      two
    </div>
  </div>

  <div class="outer">
    <div>
      one
    </div>
  </div>

</div>

Answer 1

display:inline-block 非常棘手。它计算空间，因为元素被视为内联 block 。您应该 a) 删除空格和 b) 正确设置垂直对齐方式。

#firstOuter {
  border: 1px solid orange;
}
.outer {
  display: inline-block;
  border: 1px solid red;
  vertical-align:top; 
}

<div id="firstOuter"><div class="outer">
    <div>
      one
    </div>
    <div>
      two
    </div>
  </div><div class="outer">
    <div>
      one
    </div>
  </div></div>