Why is the display of text on the site page sometimes distorted when it is updated?

Question

css

Hello!
More than once I encounter an inexplicable problem for myself, I can’t find a solution to it
.
Example, there are a couple of buttons, the text in which behaves differently, sometimes correctly, sometimes goes down:
Correct representation

Wrong..
Help me understand why this is happening, with a 50% chance there is an error..
Button styles:

.filters_menu__btn {
    text-align: center;
    min-width: 36px;
    line-height: 38px;
    height: 40px;
    background: #fff;
    border: 1px solid #ccc;
    margin: 0 -1px 0 0;
    cursor: pointer;
    display: block;
}

At the same time, if you open the source code of the page in the browser and make any change to the styles of any element, then in an instant all problem areas are aligned.

Answer 1

I found a problem, reset.css is to blame, somehow it affects the layout .. Turned it off, everything works correctly ..

Answer 2

It seems to me that there is a lot of excess in style. How would I make a button like this:
.filters_menu__btn {
padding: 20px;
background: #fff;
border: 1px solid #ccc;
cursor: pointer;
}
Sorry for the code, I'm writing from a mobile phone!