[material-ui][Button] Height is at 36.5px instead of 36px

[TheWilks]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

Honestly this is such a small thing but it bugs me to no end when trying to setup things in the UI consistently. The button height measures out to 36.5px when bring inspected in Chrome/Firefox/Edge when the height should be at 36px.

There seem to be some other components that were effected as well. Subtitle2 was a 22px high I believe and now its some fraction. My assumption is this was due to a browser update.

Again this is in no way a huge issue just something I have noticed.

Expected behavior 🤔

Button height should be at 36px not 36.5px

Steps to reproduce 🕹

Steps:

1.Go to MUI in any browser
2. Inspect the button component
3. View the height result

Context 🔦

It would be nice if the output height of components were not decimals at it makes precision aligning and component altering a bit more difficult when decimals need to be used.

Your environment 🌎

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

[mnajdova]

It comes from the line height being computed to 24.5px. The reason for it being decimal comes from using a unitless value for it, which based on the font size, translates to this specific pixel value. In order to get to 24px, we would need to specify the lineHeight to be 1.714285 (24/14). This is part of the theme.typography.button typography variant. cc @danilo-leal what are your thoughts on this? Is it worth to change the implementation?

[danilo-leal]

I wouldn't put this specific decimal value for the line height just for the sake of locking the Button's height to 36px. However, I'm curious why the line height ends up at 24.5px, even with the translation process. Should we do some digging there, instead?