CSS UNITS

Before digging into CSS properties, first, we need to know what is units and what does it do. CSS has a lot of units for expressing a length. A length is a number followed by length units, such as 10px, 2em, etc. There should not be any white spaces between the number and the unit.
Many CSS properties take “length” values like width, margin, padding, font-size, etc.
There are two types of length units: absolute and relative.

Absolute Lengths:-

These are fixed units, and a length expressed in any of these will appear exactly at that size.

cm
length in centimeters

mm
length in millimeters

inch
length in inches (1inch = 96px = 2.54cm)

px
It is relative to the viewing device. 1px is one device pixel (dot) of the display.
(1px = 1/96th of 1inch)

pt
length in points. (1pt = 1/72 of 1inch)

pc
length in picas. (1pc = 12pt)

Relative Lengths:-

It specifies a length relative to another length property.

em
Relative to the size of the element. (2em means 2 times the size of the current font).

ex
Relative to the x-height of the current font.

ch
Relative to the width of the “0” (zero).

rem
Relative to font-size of the root element.

vw
Relative to 1% of the width of the viewport*.

vh
Relative to 1% of the height of the viewport*.

vmin
Relative to 1% of the viewport’s* smaller dimension.

vmax
Relative to 1% of the viewport’s* larger dimension.

%
Relative to the parent element.

Tip: The em and rem units are practical in creating perfectly scalable layout!
* Viewport = the browser window size. If the viewport is 50cm wide, 1vw = 0.5cm.

EX:-

<style>
.parent {
    font-size: 20px;
    }
.child {
    font-size: 2em;
    }
.para {
    font-size: 12px;
    }
</style>
<div class="parent">
    <p> This is a parent paragraph.</p>
    <div class="child">
        <p> This is a child paragraph.</p>
    </div>
    <p class="para"> The size of this paragraph is not affected by parent size.</p>
</div>

In the above example, the parent paragraph will always be 20px, but the child paragraph will be 2em (or 200 percent) of the parent paragraph. By changing the parent’s font-size will affect the child paragraph size. The third paragraph (which class is “para”) is also using a “fixed” unit, therefore changing the parent size has no effect on it.

CSS Units for font-size: px|em|rem

px

Pixels are the easiest measurement to use. But there is a problem with it. let’s say we are using pixels throughout our website and we managed media query too. What if a user changes the default font-size of the browser (or device)?our header’s font-size (say 20px) will remain 20 px. Hence user’s font preferences won’t be reflected. Which is not a good user experience.

em

An em is equal to the computed font-size of that element’s parent. like, if there is a div element defined with font-size: 16px then for that div and for its children 1em = 16px. If font-size is not defined explicitly, that element will inherit it from the parent element.

rem

rem values are relative to the root HTML element, not to the parent element. That is, If font-size of the root element is 16px then 1 rem = 16px for all elements. If font-size is not explicitly defined in root element then 1rem will be equal to the default font-size provided by the browser (usually 16px).