爲什麼CSS屬性的'line-height'不能讓我在Chrome中創建狹窄的空格？

我有一個段落標記，我在其他地方定義了高度爲15px的線條，並且我在頁面的另一個下方有另一個段落標記，我想使線段高度在10px左右。有趣的是，它不會讓我下降到10px或比這更小的任何東西，但是當我將它設置爲25px或更高時，行高屬性似乎正在工作。爲什麼CSS屬性的'line-height'不能讓我在Chrome中創建狹窄的空格？

我通過Chrome瀏覽器的網頁開發工具（Firefox的Firebug的Chrome版本）檢查了相關的CSS（所有手工編碼），並且找不到任何相關的內容。是否有一個常見的CSS錯誤，使我無法縮小行高超過一定的最小量？

來源

2011-09-15 Simon Suh

你試過像'{線高度：0.75em}'它工作正常，我。 – Nathan

同意，mhenry的回答絕對值得這個勝利。 – ConorLuddy

-7

行高是相對於字體大小，除非聲明負邊距，否則不能低於該值。

來源

2011-09-15 01:40:27

假，你可以設置'line-height：0.5'，你的文字會重疊。你甚至可以將它設置爲'0'。 –

我注意到在Firefox和Chrome中，如果您設置HTML5文檔類型，那麼內聯元素的最小行高就是最小的。對於塊元素，您可以將行高設置爲任何想要的值，甚至可以使行重疊。

如果您未設置HTML5文檔類型，則塊或內嵌元素沒有最小行高。

來源

2012-08-31 18:55:14 mhenry1384

對。例如，如果你有'span'，將其設置爲'display：block'就可以解決這個問題。雖然我不知道這是否是html5標準的預期功能。這對我來說似乎很混亂。 – alex

這應該是認可的答案。意識到這解決了我的問題。 –

這太糟糕了，我想在保持'display：inline'和HTML5的同時保持更高的行高。還有其他想法嗎？ – jvannistelrooy

我碰到了同樣的問題，用行之有效：

.element { display: block; line-height: 1.2; }

來源

2013-03-07 23:52:35 Nitish

'block'是關鍵 – dlopezgonzalez

display：block;在我的跨度做了伎倆。謝謝！ – jimmyplaysdrums

在8-11 IE，火狐38.0.1和Chrome 43測試之後，該行爲是相同的：行內元素有最小線高度，他們不會低於。看來這最小高度來自CSS spec：

在一個塊容器元素，其含量是由行內的元素，「行高」指定的元件內的線框的最小高度。最小高度由基線上方的最小高度和下方的最小深度組成，就好像每個線框始於具有元素的字體和線條高度屬性的零寬度內聯框。我們稱這個虛框爲「支柱」。

如果你想保持內聯元素的一些好處，你可以使用display: inline-block。您也可以使用display: block。兩者都可以讓你在我測試過的所有瀏覽器中創建行高。更多閱讀

兩個相關的問題：

why the span's line-height is useless

The browser seems to have a minimum line-height on this block that contains text. Why?

來源

2015-06-04 14:58:42

爲什麼CSS屬性的'line-height'不能讓我在Chrome中創建狹窄的空格？

回答

相關問題