Html 如何在编码像素完美设计时处理线条高度

以下是我制作的示例设计的屏幕截图：

字母底部和红线之间有一个10px的空格。我正试图用以下代码复制这一点：

font: normal 40px arial;
border-bottom: 3px solid red;
padding-bottom: 10px;

从技术上讲，这段代码应该能给我想要的。但事实并非如此。以下是它在Chrome中运行的屏幕截图：

由于行的高度，文本和边框之间有额外的空间。以下是Chrome上的屏幕截图：

当我慢慢地测量由线条高度引起的字母下方的空间时，我可以看到它是一个9px的空白区域。因此，要在文本和边框之间获得10px的空间，我需要将代码更改为：

padding-bottom: 1px;

解决此问题的一个方法可能是在设计文件中添加一个具有文本精确高度的行高特性。但是，如果文本包含多行，则会出现混乱

---

实现像素完美设计转换的最佳方法是什么？

在HTML中，无法指定文本基线和边框之间的间距。要了解这一点，请参见以下图片：

HTML文本的高度始终包括升序区域和降序区域，即使在没有带降序或升序的字母的情况下也是如此。因此，在您的示例中，文本底部和边框之间的实际距离不是10px

要获得与文本底部的正确距离（以像素为单位），请更改文本，使其包含一个带有下行符的字母（例如Hellp、Worly），并测量下行符底部与红线之间的距离

或者，如果您试图重新创建图片，但无法更改文本，请使用绘图应用程序（例如Inkscape）测量所用字体的比率

文本高度/点大小

，然后按如下方式计算距离：

---

css distance=baseline distance-（point size*（1-ratio））

字符（字形）上方和下方的基本间距由字体设计师定义。例如，在Arial中，即使文本设置为实心（

行高：1

）时，普通大写字母“H”上方和下方也有空格。当

行高

大于1时，下方和上方都会有额外的间距。即使

行高

小于1（即带有“负前导”），也会有一些间距。您设置的任何填充都会增加间距

如果您知道内容中显示的确切文本（并且它永远不会更改），并且您依赖于始终可用的特定字体（对于Arial字体，这很可能，但不确定），然后您可以运行一些实验并进行迭代，直到找到合适的

行高

值。在这种特定情况下，

行高：0.82

将删除常用大写字母a–Z上方的间距（但其上的任何变音标记，如É或Å，将被截断），并将减少基线下方的间距（但如果字母有如“j”或“þ”中的降号，它们将被部分截断）

---

像素完美性仍可能受到字体呈现差异的影响（如抗锯齿与否）跨浏览器。

请注意，额外的空间是为

g

等字母的下行字符提供的。在不同的浏览器、操作系统、文本渲染引擎、设备等之间，它永远不会是像素完美的。你说得对。当我添加下行字符时，它填补了我在文本下面谈论的所有空白。但是，t呢字母上方的空格？在我的示例中，我已经使用了大写字母，所以我假设文本不能再高了。但是文本上方仍然有一个空格。我是否遗漏了什么？字母上方的空格可能与控制行距的

行高属性有关（例如，连续文本行中基线之间的间距）。请尝试设置
行高：1；