線條高度和內嵌塊導致邊框和元素之間的空間

我一直在使用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

回答