Text not vertically centered inside content block / line height

[undo (Watson Doe)]

This is a rather subtle issue. I couldn’t find anything because there are too many resources on the internet about how to center text vertically but these are irrelevant results.

This is a simple button with 1rem of top and bottom padding, that you can see in green in X-ray mode:

As you can see, the text is too high. I fixed it by changing top padding to 1.1rem and bottom padding to 0.9rem:

But it causes another issue: when centering elements vertically, the text inside the button is not aligned anymore with the text of the links outside:

And there is an issue with icon buttons in any case:

I want to solve this problem at the root or the closest possible to the root. There must be a setting I don’t know for this.

[zevchafer (Vincent Jongman)]

Hello,

It may be because of the “line-height” of the text. Try to decrease the line height of the text inside the button. You can find this setting here:

Edit: I personally use Flexbox to center information both vertically and horizontally. See screenshot below for the settings: