Use of px, em, rem units in css, which one I have to use and when?

Overview

Many people are confused to work with these three units together for the same design. The main reason behind it is the lack of the unit measurement of individual.

First we will have basic understanding of these units.

1. Px : px is unit of the screen.
2. Em : em is unit that contains parental element of pixel size.
3. Rem : rem is unit that contains root element (default) of pixel size.
4. Confusion between em & rem : which one should I use, and when?
5. Nested Case : where hierarchy on property contain different units measurement.
6. Combine Example : which unit contain which value at the same time

We can use these units for multiple property scenario like font-size, padding, margin, position property especially for measurement properties.

Px

Px are known as non linear angular element, which is measured by screen size of the device. Px are fixed element that works for the individual element where they are defined.

Example:

div { font-size: 10px; padding: 10px; }

This will set font size as 10px and set padding from every side as 10px.

Em

Em are dependant on parental property sizing. This is not fixed element because it depends on measurement so when the parental measurement change, the value of the em change.

Example:

div { font-size: 10px; padding: 10em; }

This will set font size as 10px and set padding as 100px from every side, because it takes measurement from font-size property where any value taken is set as 1em i.e (10px = 1em so 10em = 10px X 10 = 100px).

Rem

Rem depends on default browser or html property sizing. This is not fixed element because it depends on measurement so when the parental measurement change, the value of the rem is changed. You can change the default browser font size from settings of that particular browser.

Example:
Suppose browser default font-size is 14px.

div { font-size: 10px; padding: 10rem; }

This will set font size as 10px and set padding as 140px from every side, because it takes measurement from browser default font-size property where any value taken is set as 1em i.e (14px = 1rem so 10rem = 14px X 10 = 140px).

Confusion between em & rem

Actual question regarding use of this unit arises is that, which unit is used when specially in case of “em” and “rem”. For this be specific which unit you make default value and for which element you have dynamic measurement.

• To setup default font size all over the webview where you don’t need to change size. If element is nested, then “rem” is preferable.
• To setup dynamic measurement, if font-size decrease then element padding or margin also decrease, and then you have to select “em”.

Nested Case

In nested case, only one element is useful that is “em”. If any requirement arise like, child element’s font size or padding are half of the parental element, then “em” is useful.

Example:

div.parent { font-size: 10px; }
div.parent div.child { font-size: 0.5em; }

This will set parent font size as 10px and set child font-size as 5px because it takes measurement from parent font-size property where any value is taken & set as 1em i.e (10px = 1em so 0.5em = 10px / 2 = 5px).

Combine Example

In following example we assume that the default browser font size is 14px. So how does it effect in all three units.

Example:

div.parent { font-size: 10px; padding: 10em; margin: 10rem;}
div.parent div.child { font-size: 0.5em; padding: 10em; margin:10rem}

– For ( div.parent )
Font-size is = 10px.
Padding from every side is ( 10px = 1em so 10em X 10px ) = 100px
Margin from every side is ( 14px = 1rem so 10rem X 14px ) = 140px

– For ( div.child )
Font-size is ( 0.5em = 10px / 2) = 5px.
Padding from every side is ( 5px = 1em so 10em X 5px ) = 50px
Margin from every side is ( 14px = 1rem so 10rem X 14px ) = 140px

The turning point of the child css is font-size, because it inherits from parent element where parent element’s font size is 10px and child element is set as 0.5em so it is divided by 2 and result is set as child font size.

Padding is dependent on font size of the current element’s font size so it converts 1em in 5px because now font size is set as 5px.

Only margin is constant in both cases because it is directly inherited from root element as 14px font-size which is unchanged so it will be 140px in both case.

Conclusion

In the end i think that, to overcome these confusion we have to just make things simple which elements are based on browser or html base and which are based on media device so the selection of measurement tool becomes very easy.

I hope it will help you to overcome at least little bit from confusion of these three unit.