如何在 2 个内联块之间制作适当的垂直边距？答案

【问题标题】：How do I make proper vertical margin between 2 inline blocks?如何在 2 个内联块之间制作适当的垂直边距？
【发布时间】：2016-06-30 12:47:16
【问题描述】：

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

【问题讨论】：

能否请您发布您的 HTML 和 CSS 代码？

标签： css block margin inline display

【解决方案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>

【讨论】：

【解决方案2】：

你想要的是“vertical-align:top;”。

【讨论】：