小编arc*_*ile的帖子

以下是我编写的示例设计的屏幕截图:

字母底部和红线之间有10px的空间.我试图用以下代码复制它:

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

从技术上讲,这段代码应该给我我想要的东西.但事实并非如此.以下是Chrome中的操作截图:

由于行高,文本和边框之间有额外的空间.这是Chrome上经过检查的屏幕截图:

当我花时间测量由线高引起的字母下面的空间时,我可以看到它是一个9px的空白区域.因此,要在文本和边框之间获得10px的空间,我需要将我的代码更改为:

padding-bottom: 1px;

解决此问题的方法可能是在设计文件中添加一个行高属性,其中包含文本精确高度的数量.但是,如果文本包含多行,那么它会变得混乱.

这里完成像素完美设计转换的最佳方法是什么？