How come the width and height of em expands on zoom text but not on px? And the line height of em isn’t the same as px? https://jsfiddle.net/d6wsgyu8/2/
line-height: 122px; is equal to line-height: 7.625em; isn’t it?
With px
<div style="display:block; width: 256px; height: 130px; cursor: pointer; background-color:#000000;border-radius: 50px; border: 5px solid #0059dd;">
<div style="display:block; font-family: New Times Roman; font-size: 20px;color: #0059dd;text-align: center; line-height:122px;"> [ ENJOY THE MUSIC ]
</div></div>
With Em
<div style="display:block; width: 16em; height: 8.125em; cursor: pointer; background-color:#000000;border-radius: 3.125em; border: 0.313em solid #0059dd;">
<div style="display:block; font-family: New Times Roman; font-size: 1.25em;color: #0059dd;text-align: center; line-height:7.625em;"> [ ENJOY THE MUSIC ]
</div></div>
A pixel is a fixed measurement. An em is a measurement based on the width of the characters in the current font. So if you increase the size of the font, a container sized in ems will automatically expand to accommodate it.
In your setup the font size is the most common browser default size of 16px. Ergo, the em line hight in you example is 122px, but not if you e.g. duplicate that div and place it as a child to it.
Note 1: The px unit is commonly regarded as a fix lenght, but it is relative to one screen dot, and its size can vary between screens.
Note 2: The em unit is regarded as relative as it relates to current font size set for the container. If not set it is the closest parent’s setting or the browser itself. The em unit is hard to master when it comes to chains of sizes.
There are more units to find out about both fixed and relatives.
Then there is the “true” lenght units, e.g. mm or in(ch). Simply speaking they are interpretated by the browser to display that given length truthfully by factoring in screen resolution and setting. Useful if you’re a jeweller and want to show some diamond rings.
Do some experimenting on your own to get a grip of it.
