How to layout PX in PX?

Question

css

For example,
I took a button from .psd. Here is how I used the method of selecting distances to indent "padding"
Here are all the styles of the button:

font-size: 25px;
    font-family: OpenSans-Light;
    border-radius: 5px;
    background: #ffcb08;
    border: 0;
    border-bottom: 3px solid #c79a06;
    margin-bottom: 23px;
    padding-top: 15px;
    padding-bottom: 10px;
    padding-left: 25px;
    padding-right: 19px;

But there is a difference in height and width
In the browser :
In PSD :
In the browser the height is 63 px and in psd 52 px.
I want to know what's wrong? and correctly I typeset pixel by pixel?

Answer 1

we take the PerfectPixel chrome extension, overlay the image on top of the site, correct it through devtools, when everything has become normal, copy the styles from devtools to our project (unless, of course, there are preprocessors there)

Answer 2

Vertical paddings do not need to be specified. It's done like this:

display: block;
height: 52px;
line-height: 52px;
padding-left: 0 19px 0 25px;