Difference between em and rem- CSS

What are they?

Both of them are CSS relative measurement units. Unlike for example, Pixels, which are fixed measurement.

What is the main difference between them?

ems will take the rems, that unlike ems, are consistent. They don’t depend on the values set by the parents of the current element. They set the size relative to the root element of the page, HTML in this case.

How do you use them?

An ems unit is equal to the computed font-size for the element to which the em is applied. If no font size is defined anywhere in the CSS, the em unit will be equal to the browser’s default font size for the document, which is usually 16px.
1em = 16px
em size = pixel size/16

We can calculate rems by the following formula if the font-size of the body element is 16px:

rem = pixels/16

On pxtoem.com you can convert Pixels to em easily, even customising your em needs.

Conclusion:

Using either of them would be better than pixel units because using it prevents the browser settings to make any size adjustments.

Both of them give us flexibility in our design working similarly. Still, it’s important to be able to differentiate them because it is how the browser will determine the px value they translate into. Use one of the other will depend on what your needs are.