CSS Lengths Guide

CSS has several different units for expressing a length. So basically we have two types of length units :-

1. Absolute length units : px
2. Relative length units : em, rem, %, vh, vw

Let's see each unit of CSS length with example :-

1. px

px units are not recommended for use on screen,because screen sizes very so much. However, they can be used if the output medium is known

.box{
    width : 100px;
}

Pixels don't have anything to do with the literal screen pixels in the display you are looking at. It's actually an angular measurement.

2. em

The computed value of the font-size property of a box. If used on font-size itself, It is the computed value of the inherited font size.

.box{
    font-size : 1.5 em;
}

1 em = 16px = 100%

3. rem

A relative unit, like em, but it is always relative to the "root" element.

.box{
    width : 40 rem;
}

rem stands for "root em"

4. %

used for responsive design not always works best with heights so mainly use for widths only.

.box{
    width : 20%;
}

5. vh & vw

Viewport height and viewport width units are great for areas that takes up a specific portion of a screen.

.wrap{
    height : 10 vh;
}

.wrap{
    width : 10 vw;
}

If you made it till here and find this useful give a follow up (+1) to me.
Checkout my twitter handle : tshrvrm

CSS Lengths Guide

Understand CSS lengths px, em, rem, %, vh & vw