css - 为什么我不能减小此文本的行高？

Question

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

有问题的CSS是：

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

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

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

score 107 · Accepted Answer

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

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

score 42 · Accepted Answer

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

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

score 13 · Accepted Answer

我在移动视图中遇到了 div 的这个问题 - 行高太大，行高不起作用！我设法通过添加“显示：块”使其工作，根据此处的建议：为什么 CSS 属性“行高”不能让我在 Chrome 中制作紧凑的行间距？

希望这可以帮助其他人将来面临同样的问题

score 0 · Accepted Answer

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

您可以重置重置，也可以在确实需要时使用其他重置。

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

score 0 · Accepted Answer

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

编写自己的或使用流行的，例如

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

score -2 · Accepted Answer

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

如果它仍然不起作用，请在您想降低行高（内联 css）并放入正文 css 的地方设置高优先级。记住高优先级（！important;），因为它会覆盖任何其他未知的 css规则。

希望这可以帮助

艾哈迈德

6 回答 6