2012-10-12 23 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

相关问题