CSS 为什么我不能减少此文本的行高？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12851792/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Why can't I decrease the line-height of this text?
提问by daGUY
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-heightbelow 17px has no effect. I can bump the line-heightupto greater than 17px and it'll apply, but I can't get it lower than 17px.
这很奇怪：我有几行文本包裹在<em>标签中。无论我做什么，将值降低line-height到 17px 以下都无效。我可以将它line-height提高到大于 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.
尝试将行高调高和调低，并在每次更改后运行更新的 fiddle，您就会明白我的意思。
Why would this be? No line-heightis specified anywhere else in the CSS, so nothing is overriding it. That couldn't be the case anyway because I'm adjusting the line-heightup 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.
为什么会这样？没有line-height在 CSS 中的其他任何地方指定，因此没有任何内容可以覆盖它。无论如何都不会是这种情况，因为我在同一个 selector 内调整line-height了上下，所以应用更高的值是没有意义的，但更低的值会被覆盖。
回答by Ibu
Because the emtag is inline and its line-height cannot be lower than its parent div.
因为em标签是内联的，并且它的 line-height 不能低于它的 parent 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 emtag to 10px as well.
例如，如果您将父级的 line-height 设置为 10px，那么您也可以将emtag的 line-height 降低到 10px。
回答by Ramesh Vishnoi
In order for line-height property to work, div should has display property equal to block
为了使 line-height 属性起作用，div 应该具有等于 block 的 display 属性
.app-button-label{
line-height: 20px;
display: block;
}
回答by Grace
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
希望这可以帮助其他人将来面临同样的问题
回答by jrd1
You seem to be using normalized cssoption in jsfiddle - which equates to the CSS rules being reset- ala http://meyerweb.com/eric/tools/css/reset/
您似乎normalized css在 jsfiddle 中使用选项 -这相当于正在重置 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/
http://sixrevisions.com/css/a-comprehensive-guide-to-css-resets/
回答by jrd1
The best way to do it is using css reset.
最好的方法是使用 css reset。
Write your own or use popular one like
写你自己的或使用流行的一个
回答by Ahmed Shahin
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）并放入正文 css 的地方设置高优先级。请记住高优先级（！重要；），因为它会覆盖任何其他未知的 css规则。
Hope this helps
希望这可以帮助
Ahmed
艾哈迈德
