线条高度和内嵌块导致边框和元素之间的空间

我一直在使用bootstrap很长一段时间了，在使用inline-block而不是float之前，我刚刚遇到一个奇怪的行为，在我描述整个问题之前，让我说我不广泛地使用内联块，并且错误似乎与行高有关。线条高度和内嵌块导致边框和元素之间的空间

好了，所以是错误，因为你可以看到有就是导航项目和边界之间的差距，这毁了我的设计，现在发生的事情，因为我在float:left改变inline-block以下行：

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

那么为什么会出现这种差距呢？（我知道使用float从正常流程中移除元素并使用内联块将元素返回到其正常的文档流中）。

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

拼焊板，默认的行高为1.4的东西，所以现在如果我下面一行到我的代码，我的问题就解决了：

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

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

P.S.这是“为什么”的问题，而不是“我该如何解决这个问题”。请支持您的答案与证据，这将是伟大的:)

这不是'行高'，因此我怀疑......这是白色空间。行高设置*偶然地*纠正它， –

@Paulie_D，我知道白色空间的常见错误，有没有什么办法来验证？，我使用了font：0解决方案，但它没有工作。不过谢谢。 –

-1

更改显示为内联，而不是内联块在你的navbar-nav元素。

navbar-nav { 
    float: none; 
    display: inline !important; 
}

2016-02-17 19:46:21 Korgrue

的原因是inline-block把一个块级元素上线，就像一行文本，它的主题，然后沿着基线垂直对齐。当您将line-height设置为零时，该事实会变得模糊不清，因为零高度线上的各个点之间没有区别。

您可以按如下方式添加vertical-align: bottom;，以更改您的内嵌块元素相对于基线的坐标，并且它应该做到这一点。

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

效果应该难以区分。

2016-02-17 20:01:27 denmch

不会垂直对齐只有工作，如果你设置div显示：表？ – Korgrue

垂直对齐意味着适用于“内联级别和表格单元元素”。内联块将其块放入外部上下文中的内联流中。所以它是一个“内联级元素”，即使它在内部表现为块级元素。 – denmch

感谢您的详细解释！这就是为什么我喜欢这个网站。大量优秀的信息和聪明的人。 – Korgrue

您已经添加了inline-block的到ul元素而不是li

切换到这一点;

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

2016-02-17 20:13:22 bazzlebrush

回答