html - 行高和内联 block 导致边框和元素之间的空间

Question

我使用 bootstrap 已经有一段时间了，在我描述我的整个问题之前，我只是在使用 inline-block 而不是 float 时遇到了一个奇怪的行为，让我说我没有广泛使用内联 block ，而且错误似乎与行高有关。

好的 HERE 是错误，如您所见，导航项和边框之间存在间隙，这破坏了我的设计，现在发生这种情况是因为我将 float:left 更改为 inline-block 在下面一行:

    .navbar-nav {
        float: none;
        display: inline-block;
        margin: 0;
    } 

那么为什么会出现这种差距呢？ (我知道使用 float 会从正常流中删除元素，而使用 inline block 元素将返回到文档的正常流中。)。

现在我发现这实际上是因为行高而发生的。

TWBS，默认行高是 1.4 左右，所以现在如果我在我的代码中添加以下行，我的问题就解决了:

.navbar-default .navbar-collapse {
            text-align: center;
            line-height: 0;
 }

上面的代码被添加到 ul 中。现在看看我是如何将行高降低到 0 的，我对 line-height 有一个中等的理解，我想问的是我在这里使用了正确的解决方案吗？为什么行高会导致此错误？

P.S. 这是“为什么”的问题，而不是“我如何解决这个问题”的问题。请用证据支持你的答案，那太好了:)

Answer 1

原因是 inline-block 将 block 级元素放在一行上，就像一行文本一样，然后它会沿该基线垂直对齐。当您将 line-height 设置为零时，这个事实就被掩盖了，因为沿着零高度的线的各个点之间没有区别。

您可以如下添加 vertical-align: bottom; 来更改内联 block 元素相对于基线的位置，它应该可以解决问题。

.navbar-nav {
  float: none;
  display: inline-block;
  margin: 0;
  vertical-align: bottom;
}

效果应该是无法区分的。