问题标签 [line-height]

我做了这个例子：http ://codepen.io/tomsoderlund/pen/JYJpPR来演示。

我正在使用以下方法font-size在父级 ( ) 上设置 (=size of 1 em) .canvas：

font-size和均以line-heightpx 为单位设置。font-size是（正确地）不受父母的 em 大小的影响，但是line-height是 - 为什么会这样？

与 1.15 的 a 一起使用时，Chrome 会截断 Segoe UI 的显示line-height（默认设置normalize.css）在 Firefox 上不会发生此行为

最好通过屏幕截图来说明这一点（放大而不是使用更大的字体）

你可以在这里看到一个 JSFiddle

为什么 Chrome 会截断 g 字符？为什么当你降低线高然后向同一个方向移动变得更好时，问题会变得更糟？

请注意，添加padding到输入并不能解决问题

Edge 在加载页面后呈现错误，但在单击刷新后它会正确呈现。

在 Chrome 和 Firefox 上按预期工作

文本应在标题框及下方居中，但在页面加载时位于框上方。如果我单击 F5 或刷新它会按预期呈现。

我正在尝试使用矩阵（代表黑白）在网页（<p></p>）上显示二维码。我正在使用 ████ 个字符来显示这样的内容，但即使行高的 CSS 属性为 0px，我仍然无法删除所有间隙（并且无法读取 QR 码）。我的代码和生成的图像：

我有像这些项目这样的行作为 h2

但如果我有一个多行 h2，它看起来很糟糕。如果 h2 的多行为 30 像素而不是 50 像素，我该如何降低它的行高？

在工作场所，他们为我提供了这样的线框。

上图说明：行与行之间保持10px的边距，并使用提供的 css 类.font16。

这是 .font16 类的内容：

所以这就是我所做的。

我的代码没有类 font16 ：

我的类 font16 的代码：

因此，当我添加 font16 类时，由于行高，行之间的边距似乎增加了。

这是我所做的以确保它们之间仍有 10px 的边距：

我在上面的代码片段中使用的计算：我从行高中减去字体大小，即 22px-16px = 6px，即文本上方 3 像素和文本下方 3 像素。所以 10 像素 - 3 像素 = 7 像素。因此给出了 7px 的边距底部，以确保行之间仍有 10px 的边距。

这是我使用的正确方法吗？我正在正确计算行高和边距吗？

注意： 我无法更改 font16 类的值。

我最近在使用 CSS 时遇到了一个奇怪的行为，我试图了解发生了什么，但我想我错过了一些关于导航器中渲染器引擎的知识。

代码在 codepen 上：https ://codepen.io/ghivert/pen/mdyEZpe 。
有关信息，代码也在下面：

如果你看一下 codepen，中央网格上的溢出比我预期的要多一点。<main>不完全是内部<div>和 的大小<footer>，它高一些像素。

我发现它来自line-height: 1.15;和 Poppins 字体系列的组合。当我删除 line-height 或 Poppins 时，它按预期工作，在<main>.

你能解释为什么会发生这种行为吗？以避免在未来数小时内对其进行调试。

编辑：

添加图片更清晰：

我说的是红色页脚下方的白线。

我正在尝试在 html 标题中的行之间添加空格：我真的无法弄清楚我的问题出在哪里...... :-( html 是：

https://jsfiddle.net/uvkqt7wj/

感谢您的宝贵帮助

I have this set of boxes with links and they are displayed as flex items. The problem is that the coverage of the clickable area(yellow area) is not consistent due to the height of each box. Setting the line height of anchor tag to zero will fix the issue but that introduces other problems like overlapping text. How can I fix this issue while keeping both line height and flex behavior?

Thanks

我在按钮中有一个图像和一个跨度，我尝试过使用：

1. flex 与对齐项目：中心
2. 将 span line-height 设置为与容器相同的高度
3. 内联块和垂直对齐

但是如果我没有在图像中添加 1px 的 padding-top，它在 div 中似乎并没有真正垂直对齐，而 span 文本看起来很好，我不知道为什么。

HTML

CSS