Html 对齐关闭：没有任何内容的内联块元素之间的间隙

我有一个内联块元素的伪网格显示在我的主页上，但其中两个元素之间存在差距，我无法解释。没有元素，没有空白，没有br，在这些元素之间我找不到任何东西迫使它们分开。当我将鼠标移到间隙中时，Chrome的inspect工具只是突出显示了后面的容器。我试过摆弄利润，但我没有设法让左上角的元素（新预订）与它下面的元素（会员计划）配合得很好。所有其他元素的边距都按我所希望的那样间隔得很好

摆弄显示问题的代码：

有什么建议吗

.home容器{
边缘顶部：120px；
宽度：800px；
}
.家用集装箱a{
显示：内联块；
颜色：黑色；
文字装饰：无；
宽度：350px；
高度：100px；
利润率：10px；
填充：10px；
边框：实心1px#25561B；
背景色：#F9FBF9；
}
.家用集装箱a h2{
文本对齐：居中；
字体系列：“Lucida Sans Unicode”，“Lucida Grande”，无衬线；
利润率：10px；
}
.家庭集装箱#新预订{
身高：242px；
浮动：左；
}
.家庭集装箱#新预订#汽车新预订{
显示：块；
宽度：250px；
利润率：10px自动20px；
}
.home container#下次预订{}.home container#所有预订{}.home container#会员计划{}.home container#浏览间隔{}

---

添加

垂直对齐：顶部

到

的CSS规则。主容器a

（否则，内联块元素将按其基线对齐，默认情况下，基线是最低的文本行）

添加此项

.home-container #membership-plans {
    float:left;
}

它将使元素之间的空间与其他元素相同。它刚才被你用过的另一个a推到了左边。添加代码后，元素应该保留，这就是为什么它修复了间距问题

---

有两种方法可以做到这一点：

1） 正如Johannes已经写过的，

.home容器是一个{vertical align:top；}

，因为默认值是基线

2） 使用

.home容器a{display:block；float:left；}

而不是

display:inline block

。浮动块图元与顶部对齐

---

我没有看到重点，因为这里有更多的上下文，但无论如何我都会编辑我的文章。我仍然看不出这有什么帮助，因为如果不在小提琴中显示问题，实际上就看不到问题，小提琴也会显示代码。他们自己的JSFIDLE版本称为stack snippets（我随意将代码插入其中）。尽管欢迎您链接到JSFIDLE示例，但它绝不应该是所讨论代码的唯一来源。如果JSFIDLE关闭或消失，该怎么办？很抱歉，尽管此解决方案在这种特定情况下有效，但解释是不正确的。（请参阅下面我的答案，了解其行为方式的原因）