Why is the text inside the button centered with line-height?

CodePen.

Without line-height: 0:

With:

Why does it work?

Hey there @Porphyrogennitos !

Here’s an Article from MDN that might help explain the line-height element

https://developer.mozilla.org/en-US/docs/Web/CSS/line-height

Perhaps by having the manual line-height at 0 may be resetting the position of the element by other lines of CSS, in this case you only have one line of text, so no overlapping is happening.

Best,
Cy499_Studios