Equal padding on button not distributing equally - html

Question

I was just having a small issue with applying equal padding to a button, I applied the following styles to it:
.btn-request-more-info {
background: #fff;
color: #6e2c91;
font-size: 18px;
padding: 0.5 2.5em;
border: 1px solid #fff;
font-weight: 900;
text-transform: uppercase;
border-radius: 10px;
border: 1px solid #fff;
-webkit-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
}
Now since the above doesn't work, I had to use a hack and reduce 1px from the bottom padding of the button:
.btn-request-more-info {
background: #fff;
color: #6e2c91;
font-size: 18px;
padding: 10px 2.5em 9px;
border: 1px solid #fff;
font-weight: 900;
text-transform: uppercase;
border-radius: 10px;
border: 1px solid #fff;
-webkit-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
}
10px above and 9px below, so why is it that 0.5em padding is not equally distributed?
P.S. to recreate the error, change the styles in the button to padding:0.5em 2em.
Difference in padding (I have used ruler to show visually the difference in padding distribution).
Padding above:
Padding below:
I have had this problem many times before, but never found a solution. Why might this be happening?

Answer 1

This can be because of line-height property of css. If you see the computed values(visual representation present at the end of style tab of developer tool) from developer tool both padding-top and bottom are same. But the difference you notice is not considering the line-height of the text. If you hover over your element from developer tool you'll see that box surrounding the text has some space below the text. The browser while applying padding consider this to be the part of the text and applies padding only around this box.

Answer 2

Try line-height:normal properties in css for button:
.btn-request-more-info {
background: #fff;
color: #6e2c91;
font-size: 18px;
padding: 10px 2.5em 10px;
border: 1px solid #fff;
font-weight: 900;
text-transform: uppercase;
border-radius: 10px;
border: 1px solid #fff;
line-height:normal;
-webkit-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
}