这是我制作的示例设计的屏幕截图：
字母底部和红线之间有 10px 的空间。我正在尝试使用以下代码复制它：
font: normal 40px arial;
border-bottom: 3px solid red;
padding-bottom: 10px;
从技术上讲，这段代码应该给我我想要的。但事实并非如此。这是它在 Chrome 中运行的屏幕截图：
由于行高，文本和边框之间有额外的空间。这是 Chrome 上经过检查的屏幕截图：
当我花时间测量由行高引起的字母下的空间时，我可以看到它是一个 9px 的空白区域。因此，要在文本和边框之间留出 10px 的空间，我需要将代码更改为：
padding-bottom: 1px;
对此的解决方案可能是在设计文件中添加带有文本精确高度数量的 line-height 属性。但是，如果文本包含多行，它会搞砸。
这里完成像素完美设计转换的最佳方法是什么？
在 HTML 中，无法指定文本基线和边框之间的间距。要理解这一点，请看这张图片：
HTML 文本的高度始终包括上升区域和下降区域，即使在没有带有下降或上升的字母的情况下也是如此。因此，在您的示例中，文本底部和边框之间的实际距离不是 10 像素。
要获得与文本底部的正确距离（以像素为单位），请更改文本以使其包含一个带下降器的字母（例如 Hellp、Worly"）并测量下降器底部与红线之间的空间。
或者，如果您尝试重新创建图片并且无法更改文本，text height / point size请使用绘图应用程序（例如 Inkscape）测量所用字体的比例，然后计算距离如下：
css distance = baseline distance - (point size * (1 - ratio))
字符（字形）上下的基本间距由字体设计者定义。例如，在 Arial 中，普通大写字母（如“H”）的上下都有空格，即使文本设置为实心 ( line-height: 1) 也是如此。当line-height大于 1 时，上下有额外的间距。即使对于line-height小于 1（即，带有“负前导”），也可能存在一些间距。您设置的任何填充都会增加它。
如果您知道内容中出现的确切文本（并且它永远不会改变）并且如果您依赖特定字体始终可用（这对于 Arial 字体很有可能，但不确定），那么您可以运行一些实验和迭代，直到找到合适的line-height值。在这种特定情况下，line-height: 0.82将删除常见大写字母 A-Z 上方的间距（但它们上的任何变音符号，如 É 或 Å，将被切断）并会减少基线以下的间距（但如果字母有下降在“j”或“þ”中，它们将被部分切断）。
跨浏览器的字体渲染差异（如抗锯齿与否）可能仍会影响像素完美性。