为什么我不能降低此文本的行高？

Question

http://jsfiddle.net/mJxn4/

这很奇怪:我在<em>标签中包含了几行文字.无论我做什么,降低line-height低于17px 的值都没有效果.我可以将最大值line-height 提高到大于17px并适用,但我不能低于17px.

有问题的CSS是:

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

尝试调整高度和低度的线高,并在每次更改后运行更新的小提琴,您将看到我的意思.

为什么会这样？line-height在CSS中的其他任何地方都没有指定,因此没有任何内容覆盖它.无论如何情况都不是这样,因为我在同一个选择器中调整line-height上下,所以没有意义的是应用更高的值,但是更低的值会被覆盖.

Answer 1

因为em标记是内联的,其行高不能低于其父级div.

例如,如果将父级的行高设置为10px,那么您也可以将em标记的行高减少到10px.

Answer 2

为了使line-height属性起作用,div应该具有等于block的显示属性

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

Answer 3

我在移动视图中遇到了div这个问题 - 线条高度太大而且线高不起作用!我设法通过添加"display:block"使其工作,根据建议:为什么CSS属性'line-height'不允许我在Chrome中使用紧凑的行间距？

希望这有助于将来遇到同样问题的其他人