CSS-18.根据现有字体，通过FW还原字体字号行高

仿制：

还原字体：

截图，打开FW载入图片

首先调整字体字号与要仿制的文字相同并完全覆盖（第一行即可）

此时我们就得到了行高和字体大小以及字体

现在分析边距

在上面已经测出来行高，在FW测量顶部到字体的距离是30px，字体自带行高为30px,重叠区域的高为10px,那么padding-top:20px;

现在测padding-left的值：

直接得出10px。

最后测量padding-right

此时我们发现左右边距不一样，这时要注意，页面中有文字时，可能文字最后一个不能容纳所以换行，如果右边距设置了比左边距大的值，有可能导致原页面中最后一个文字换到下一行，所以此时一般情况下我们设置与padding-left一样的值就好。虽然在这个案例中，padding-right取10和20没区别，但在别的场景中，很容易发生问题。

代码

*{

padding: 0px;

margin: 0px;

}

.class{

box-sizing: border-box;

width: 270px;

height: 100px;

background-color: #757575;

line-height:30px;

padding-top: 20px;

padding-bottom: 20px;

padding-right:10px;

padding-left:10px;

}