2012-10-12 36 views
23

http://jsfiddle.net/mJxn4/爲什麼我不能減小此文本的行高?

這很奇怪:我在<em>標記中包裹了幾行文字。無論我做什麼,將line-height的值降低到17px以下都沒有任何影響。我可以將line-height上調大於17px,它會適用,但我不能得到它低於17px。

的CSS問題是:

#others .item em { 
    font-size: 13px; 
    line-height: 17px; 
} 

嘗試調整行高較高和較低,每次更改後運行更新的小提琴,你會明白我的意思。

這是爲什麼?在CSS的其他地方沒有指定line-height,所以沒有任何東西可以覆蓋它。不管怎麼樣,因爲我在相同的選擇器內上下調整line-height上下,所以更高的值將適用,但更低的值會被覆蓋。

+0

我開始與本地HTML/CSS第一;然後我提取了我遇到的問題,併發布在JSFiddle上,而且看起來也是如此。它可能是瀏覽器嗎?我正在使用Safari。 – daGUY

+0

我認爲,它工作正常,你可以把line-height:40px看成與font-size:13和line-height:17不同,因爲它看起來很相似。 – Osify

+0

@mtr OP已經表示可以增加它,而不是減少它。 – Daedalus

回答

36

因爲em標籤內聯和行高不能超過其父div低。

例如,如果您將父級的行高設置爲10px,那麼您也可以將em標記的行高降低到10像素。

+0

但父母(' #others .item')在我的例子中沒有'line-height'。它只是通過瀏覽器默認'行高'然後呢? – daGUY

+0

默認行高設置爲自動。 – Ibu

+0

嗯,你是對的:通過在父級上指定一個較低的'line-height',我可以將'em'的'line-height'降低到相同的值。 – daGUY

-1

最簡單的方法是指定具有更高優先級的線高度流行的一種,例如,你可以寫:行高:14px的重要;!

如果它仍然沒有工作設置高優先級在兩個你想減少行高(內聯CSS),並放在身體的CSS ..記住高優先級(!重要;),因爲它覆蓋任何其他未知的CSS規則。

希望這有助於

艾哈邁德

4

爲了line-height屬性的工作,DIV應該顯示屬性等於塊

.app-button-label{ 
    line-height: 20px; 
    display: block; 
} 
+1

顯示:塊爲我工作。謝謝 – khurram

相關問題