Difference between EM and REM

We all know that the CSS is the language mostly used in the designing a webpage. The designing of webpage has got much easier because of these languages. These languages use the unit’s named EM and REM. So, in this article we are going to learn about the major differences between the EM and REM. Here, we also discuss briefly how each of the unit is used in the webpage designing.

EM

EM is one of the most used unit in the CSS language for webpage designing. The element scaling can be done using the EM. The EM is one of the relative units of the CSS. The EM makes the work a lot easier in designing. According to the font size of its parent element the child element is set. The font sizes in the EM unit are defined in terms of pixels. The EM is not only used in setting up the font sizes. The EM unit can be used for a lot of works like padding and setting up the height and widths also. The value of EM will be relative when used it for other than font size setting. In EM unit the parent font sizes are defined in pixels and the child font sizes are defined using the “em” unit. The major problem using the EM unit is the compounding effect. The unit will be able to compound from different levels of the code and influence the other levels.

The relative em unit is calculated as:

div = 16px
p inside a div = 2em (32px)
p inside a div = 0.5em (8px)

REM

REM is a commonly used unit of the CSS in creating the webpages. The REM unit is also called as root em. REM is also a relative unit which is used in CSS. The value of REM is always depending on the font size of the root element. In CSS program, the root element is a html tag. So, the html tag act as the root element of the code. If the root element does not have any font size selected or assigned than the browser automatically makes the font size as 16pixels. The parent element size is not considered while using the REM unit. The font size of the root element will only be referred or considered in the REM unit. The computing effect will be there in the EM unit, but the computing will be removed by the use of the REM unit in CSS. Other than setting the font size the REM can also do the things like padding and margins and the stuff of that kind. The consistency will be increased when the REM unit is used in CSS for webpage designing. The REM unit will be relative for margin, padding etc. The predictability is also a key feature of the REM unit in CSS. The relative unit used to represent the size of the child element is “rem” and size of the root elements is defined in terms of pixels.

Relative unit for the REM unit is:

Default = 16px
2 rem means 32px

Difference between EM and REM in tabular form

EM	REM
The EM unit sets the font size depending on the font size of the parent element.	The REM unit sets the font size of the child element depending on the root element or the html tag.
The relative unit of the EM is “em” and it is used in representing the font size of the child element.	The relative unit of the REM unit is “rem” and it is used in representing the font size of the child element.
The EM faces a problem called compounding.	No such problem will be occurred while using the REM unit.
The elements or child elements of an em changes as the element is nested.	The elements or child elements of the REM unit do not change as the element is nested.
The relative unit will be changed based on the division.	There will be no such changes present in the REM unit.