为什么我不能减少此文本的行高？答案

【问题标题】：Why can't I decrease the line-height of this text?为什么我不能减少此文本的行高？
【发布时间】：2023-03-03 05:19:27
【问题描述】：

这很奇怪：我在<em> 标记中包裹了几行文本。无论我做什么，将line-height 的值降低到 17px 以下都没有效果。我可以将line-height up 提高到大于 17px 并且它会适用，但我不能让它低于 17px。

有问题的 CSS 是：

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

尝试将行高调高或调低，并在每次更改后运行更新的小提琴，你就会明白我的意思了。

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

【问题讨论】：

我先从本地 HTML/CSS 开始；然后我只提取了我遇到问题的部分并将其发布在 JSFiddle 上，并且显示方式相同。会不会是浏览器？我正在使用 Safari。
我认为，它工作得很好，你可以把 line-height: 40px 看看不同，因为 font-size: 13 和 line-height: 17 看起来很相似。
@mtr OP已经说过可以增加它，但不能减少它。
相关：stackoverflow.com/questions/7424867/…

标签： css em

【解决方案1】：

您似乎在 jsfiddle 中使用 normalized css 选项 - 这相当于重置 CSS 规则 - ala http://meyerweb.com/eric/tools/css/reset/

您可以重置重置，也可以根据需要使用其他重置。

【讨论】：

【解决方案2】：

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

例如，如果您将父级的 line-height 设置为 10px，那么您也可以将 em 标签的 line-height 降低到 10px。

【讨论】：

【解决方案3】：

最好的方法是使用 css 重置。

自己编写或使用流行的类似

【讨论】：

【解决方案4】：

最简单的方法是指定更高优先级的行高，例如可以这样写：line-height: 14px !important;

如果它仍然无法工作，请在您想减小行高（内联 css）并放入主体 css 的地方设置高优先级。记住高优先级（！important;），因为它会覆盖任何其他未知的 CSS 规则。

希望对你有帮助

艾哈迈德

【讨论】：

【解决方案5】：

我在移动视图中遇到了 div 的这个问题 - 行高太大，行高不起作用！根据此处的建议，我设法通过添加“显示：块”使其工作：Why isn't the CSS property 'line-height' letting me make tight line-spaces in Chrome?

希望这对以后遇到同样问题的其他人有所帮助

【讨论】：

【解决方案6】：

为了让 line-height 属性起作用，div 的 display 属性应该等于 block

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

【讨论】：