css - 如何在 2 个内联 block 之间设置适当的垂直边距？

Question

我有两个带有 display:inline block 的 div 彼此相邻，但是第二个的宽度可能会变得很长以至于它会落在第一个 div 之下。这很好，但问题是发生这种情况时，2 个 div 之间没有垂直空间。我可以通过向第一个 div 添加 margin-bottom 来解决这个问题，但这会导致第二个 div 稍微低一点，即使它位于第一个 div 的右侧。

Answer 1

您使用的是什么浏览器？正如您在下面看到的，两个 inline-block div 在一个滑到另一个下方时保留了边距。 (事实上​​ ，摆脱 inline-block 元素之间的边距有点棘手，但这是另一个问题。)

#container {
  width: 200px;
}
#top {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: red;
}
#right {
  display: inline-block;
  width: 150px;
  height: 100px;
  background: blue;
}

<div id="container">
  <div id="top"></div><div id="right"></div>
</div>