当 line-height 什么都不做时，如何降低行高？答案

【问题标题】：How do you decrease the line height when line-height does nothing?当 line-height 什么都不做时，如何降低行高？
【发布时间】：2020-04-30 03:21:25
【问题描述】：

我正在尝试将http://alexanderwales.com 中“Works”下左上角块中的摘要文本的行距更改为单行距（不，我不是亚历山大威尔士，只是一个随机风扇）。文本的行间距很大，看起来大约是双倍行距。

line-height: normal !important 什么都不做。根据我有限的 CSS 经验，这应该可行。

注释掉正文中的两个行高可以使间距更好，但我不知道为什么。

如果您知道该问题的答案，我也会对您如何获得该答案非常感兴趣。与常规代码不同的是，当我遇到 CSS 问题时，我不知道如何调试它们，除了在谷歌上搜索和四处尝试随机的东西直到它起作用。

如果我描述得不够好，相关元素的 Xpath：/html/body/div[1]/main/div/div/div/div/div/div/section[3]/div /div/div[1]/div/div/section/div/div/div/div/div/div[2]/div/span

上面写着“一个在他最好的朋友死后挣扎的少年发现自己置身于一个幻想世界——一个似乎是他们曾经一起玩过的每一个龙与地下城战役的融合。”

【问题讨论】：

标签： css

【解决方案1】：

在 chrome 开发工具中，当一个元素被选中时，会有一个计算选项卡。您可以使用它来查看如何将特定样式应用于元素以及从何处应用。您可以浏览它的每个部分并禁用它们，以查看样式的来源以及如何更好地覆盖它们。

在这种情况下，您所要做的就是将行高应用于作为该 span 的父级的 div.elementor-widget-container，然后该组件将具有与之关联的行高。

【讨论】：

我在stackoverflow.com/questions/11829393/… 中找到了答案——我想知道为什么我不能专门设置跨度的样式。感谢您的评论，如果没有您的评论，我可能不会发现。我给了你一个赞成票:)

【解决方案2】：

您的 div 元素上似乎有一个带有“elementor-widget-container”类的行高属性（从 body 继承的一些值），我在 devtools 上删除了它，行高看起来更小了。

我是怎么到那里的？我通常会检查父组件的属性以寻找可能“泄漏”的东西。

【讨论】：

【解决方案3】：

我正在尝试将跨度中摘要文本的行距更改为单行距

‎ 跨度有display: inline，行高does not work for inline elements。

我认为这个想法是，如果您在文本块中有一个内联元素，则 CSS 规范假定您不希望有一行与其他行具有不同的行高，因此它不允许您设置行高。例如，如果你有

<p>lorem ipsum. 
Sed ut <em>perspiciatis unde</em>
ut aliquid ex 
ea commodi consequatur? </p>

如果第二行的行高与其他行不同，那就太奇怪了。

重要提示：行高并不是唯一对内联元素不起作用的东西。阅读更多CSS display: inline vs inline-block

如果您知道该问题的答案，我也会对您如何获得该答案非常感兴趣。与常规代码不同的是，当我遇到 CSS 问题时，我不知道如何调试它们，除了在谷歌上搜索并四处寻找随机的东西直到它起作用。

当评论者试图回答这个问题时，我搜索了更多内容，最终遇到了关于内联元素的 stackoverflow 答案。如果我将来遇到问题，我应该添加我遇到问题的 html 元素。例如，“span line-height not working”谷歌搜索查询会在第二个结果中回答我的问题。所以不幸的是，该策略基本上仍然是“谷歌搜索和尝试随机事物”，但公平地说，你可以说这几乎就是调试的内容。或者，如果您想花哨的话，也可以说“研究和试验有根据的猜测”。

【讨论】：