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

http://jsfiddle.net/mJxn4/

This is very odd: I have a few lines of text wrapped in an <em> tag. No matter what I do, lowering the value for line-height below 17px has no effect. I can bump the line-height up to greater than 17px and it'll apply, but I can't get it lower than 17px.

这很奇怪：我在标签中包含了几行文字。无论我做什么，降低行高低于17px的值都没有效果。我可以将线高度提高到大于17px并且适用，但我不能低于17px。

The CSS in question is:

有问题的CSS是：

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

Try adjusting the line height both higher and lower and run the updated fiddle after each change, and you'll see what I mean.

尝试调整线条高度更高和更低，并在每次更改后运行更新的小提琴，你会明白我的意思。

Why would this be? No line-height is specified anywhere else in the CSS, so nothing is overriding it. That couldn't be the case anyway because I'm adjusting the line-height up and down within the same selector, so it doesn't make sense that a higher value would apply, but a lower value would get overridden.

为什么会这样？在CSS中的任何其他位置都没有指定行高，因此没有任何内容覆盖它。无论如何情况都不是这样，因为我在相同的选择器中上下调整行高，所以没有意义的是应用更高的值，但是更低的值会被覆盖。

6 个解决方案

#1

Because the em tag is inline and its line-height cannot be lower than its parent div.

因为em标签是内联的，并且其行高不能低于其父div。

For example, if you set the line-height of the parent to 10px, then you would be able to decrease the line-height of em tag to 10px as well.

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

#2

I was facing this problem with divs in mobile view - the line height was way too big and line-height wasn't working! I managed to make it work by adding "display:block", per advice here: Why isn't the CSS property 'line-height' letting me make tight line-spaces in Chrome?

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

Hope this helps anyone else facing the same problem in future

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

#3

In order for line-height property to work, div should has display property equal to block

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

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

#4

You seem to be using normalized css option in jsfiddle - which equates to the CSS rules being reset - ala http://meyerweb.com/eric/tools/css/reset/

你似乎在jsfiddle中使用了规范化的css选项 - 这等同于重置的CSS规则 - ala http://meyerweb.com/eric/tools/css/reset/

You can either reset the reset, or use a different reset if you really need it.

您可以重置重置，或者如果确实需要，可以使用不同的重置。

See here for more details:

有关详细信息，请参见此处

http://sixrevisions.com/css/a-comprehensive-guide-to-css-resets/

#5

The best way to do it is using css reset.

最好的方法是使用css reset。

Write your own or use popular one like

自己写或使用流行的

http://meyerweb.com/eric/tools/css/reset/

#6

-1

The simplest way is to specify the line height with a higher priority, for example you could write: line-height: 14px !important;

最简单的方法是指定具有更高优先级的行高，例如你可以写：line-height：14px！important;

If it is still not working set high priority in both where you u would like to decrease the line height (inline css) and also put in the body css .. remember the high priority (!important;) because it overrides any other unknown css rules.

如果它仍然没有工作设置高优先级你想要降低行高（内联css）并且还放入body css ..记住高优先级（！important;）因为它覆盖任何其他未知的CSS规则。

Hope this helps

希望这可以帮助

Ahmed

艾哈迈德

#1