问题标签 [line-height]

我有一个多年来一直存在的问题。

文本line-height: 1将是紧凑的，并将到达周围元素的顶部和底部。

具有另一个行高的文本将更具可读性，但同时，它将不再到达周围元素的顶部和底部。

这是问题的代码示例和骇人听闻的解决方案。更改行高或字体大小会破坏它。

这是一个可靠的解决方案吗？

把line-height取到了极致，就是为了展示效果。

我有这个文本区域，我用这个hack来获取行号：

但是，这很好，我无法让 textarea 的行高、填充等与行号的相同属性相匹配。

您可以在第 6 行之后看到下面的行开始移动。

这是我的 CSS：

有什么方法可以改变它们以匹配 textarea 的属性？

先感谢您！

见截图。作者导出的字体顶部有额外的空间，这会在嵌套在按钮中等情况下影响我们的对齐方式。我们预计不会很快对此进行修复，因此尝试垂直对齐此问题的最佳方法/技巧是什么 - 将修复应用于段落/跨度本身，而不是使用容器将其向上推。

我们尝试了类似的方法：

但是想知道是否有任何其他技术可以用来实现更具可扩展性的东西？（不添加额外的标记/开销）

这些跨度中未应用线高和高度。这是代码：https ://github.com/giniblanco/recipe-app 谢谢。 见图片

我正在尝试减少这两段文本之间的空间。

我不能将其减小到 1px 以上。即使是 1 px，行高也不是最小的。我希望行高低于 1px。

这是使用的 HTML：

CSS：

我正在做一个个人项目，为图像提供缩略图，您可以滚动浏览并单击以设置主图像。我注意到发生了一件奇怪的事情。

我在这里的 Stackblitz 项目中重新创建了这个问题（https://stackblitz.com/edit/angular-fidgzq?file=src/styles.css）

如果我在 thumbnails-display.component.css 中将 line-height 设置为.thumbnail-image-button-icon（20px或在 style.css 中导入 ~@angular/material/prebuilt-themes/deeppurple-amber.css），“下一个缩略图页面单击的区域” " 将触发超出.thumbnail-image-button-down按钮的区域。

但是，如果 line-height 是inherit，计算正常（不导入角度主题），“点击下一个缩略图页面”将触发的区域正好在.thumbnail-image-button-down按钮周围。

我认为减少 line-height 可能在视觉上这样做了，但是让 div 展开了，但是，正如您在屏幕截图中看到的那样，高度有很大不同。此外，如果您检查.thumbnail-image-button-down按钮，您可以看到它没有展开。

如何减小.thumbnail-image-button-down按钮的大小以及“单击下一个缩略图页面”将触发的区域？

过去几天我一直在网上查看文档和问题，但找不到与我的问题相关的类似问题。

似乎正在发生的是 JSPDF 正在根据任何给定表格或 div 的第一个文本节点的字体大小计算自己的行高。事实上，它似乎为任何文本节点创建了相同的字体高度间距，包括甚至不在元素内的随机测试文本。

我能找到的唯一解决方法是添加一堆负边距来改变第一个文本元素的位置，但这不是一个好的选择。

我通过使用 onclone() 回调附加一个子元素并比较 2 个布局，确认它没有在 HTML2CANVAS 内部发生。

我试过设置lineHeightFactor，它没有效果，设置line-height inline以确保它被使用。我什至将所有边距、填充和行高完全重置为 0，并且 JSPDF 仍然为任何给定 div 元素中的第一个文本元素添加额外的间距，而其他所有内容都相互堆叠。这不会发生在图像上，只有文本节点。

这是我用来触发 PDF 的：

我想在渲染后获取 Rect 中元素的行高，为此我正在使用 useRef

我没有得到任何价值CSSStyleDeclaration

我不确定如何获得这些值。请帮我

提前致谢 ：）

我正在努力理解以下 css 行为。也许我错过了一些重要的事情，因为这对我来说实际上似乎是一个简单的场景。考虑以下示例：

因为container已经line-height: 20px设置，我希望它是 20px 高。如果它只包含文本，至少是这种情况。然而，对于 svg，它突然高 24px，即使 svg 高 20px，正如预期的那样，因为height=1em. “文本”的高度也为 23 像素，尽管我希望它是 20 像素。

有趣的是，如果我将container's line-height 设置为 30px 之类的东西，它的行为与预期的一样：container现在30px很高。

你能帮我理解为什么container不是 20px 高吗？或者line-height一旦容器包含除纯文本之外的其他元素，就不容易预测？谢谢！

I don't understand why there is a gap between the paragraph and the div element, below is my code. I am new to CSS.