1. CSS length units:

If you have a little bit of familiarity with CSS you may have been introduced to these terms earlier "px", "em", "rem". Apart from these examples, there are a lot of other length units are present. In this article, we are going to discuss all of them. We have 2 types of length units available - 1. Absolute Lengths 2. Relative Lengths.

Absolute Lengths:

Absolute length units are considered as fixed size and they are not relative to anything. As these units are not dependent on the screen size, it is not advisable to use these units in responsive designs.

cm:

• Name: centimeters.

• Relation with other units: 1cm=37.8px=25.2/64 in

mm:

• Name: millimeters.
• Relation with other units: 1mm= 1/10 cm

in:

• Name: inches.
• Relation with other units: 1in= 64/25.2 cm = 96 px

pt:

• Name: points.
• Relation with other units: pt= 1/72 in

pc:

• Name: picas .
• Relation with other units: 1pc= 12pt = 1/6 in

px:

• Name: pixels.
• Relation with other units: 1px= 1/96 in
• Description: It is one of the most used absolute units. In spite of being an absolute unit, it's length depends on the device type.

General relation among all absolute length units

Example:

    <p style="font-size:2.54cm">cm</p>
    <p style="font-size:1in">in</p>
    <p style="font-size:25.34mm">mm</p>
    <p style="font-size:72pt">pt</p>
    <p style="font-size:6pc">pc</p>
    <p style="font-size:96px">px</p>

Output

Relative Lengths:

Relative length units are not fixed, they are related to others (ex. parent element, viewport size). These Relative lengths are used for responsive design. Below some useful relative length units are discussed.

em:

The em unit is relative to the font size of its direct or nearest parent in the case of the font size property. Other properties like width, padding, margin, etc, it is related to the font size of the element itself.

For font-size property

If a p tag has a font-size of 2em and it's parent container has a font-size of 30px, then size of the p tag is equal to (2*30)px = 60px

For other properties

If a div has a padding of 3rem and the font size of that div is 30px then the div will have a padding of equal to 90 px.

Example : Make a div of the class container.

.container{
    padding:3em;
    font-size: 30px;
}

rem:

The rem unit is related to the html (root) font-size.

It calculates size based on root size. So if the root has font-size 30px and the div has font-size of 2rem, then the div's font size is equal to (2*30)px=60px.

vw:

vw stands for "view width". 1 vw is represented as 1% of the viewport width.

If you want your element to take the full width of the screen then the width should be 100vw.

.div{
  width: 100vw;
}

If you want your element to take the half-width of the scene then the width should be 50vw.

.div{
  width: 50vw;
}

vh:

vh stands for "view height". 1 vh is represented as 1% of the viewport height.

If you want your element to take the full height of the screen then the height should be 100vh.

.div{
  height: 100vh;
}

If you want your element to take the half-height of the scene then the width should be 50vh.

.div{
  height: 50vh;
}

%:

% is relative to the parent element.

If you want your element to take the full width of the parent then the width should be 100%.

.div{
  width: 100%;
}

Ex: A a div's if the parent container has a height of 200px and you set the div's height as 40% then this div's height will equal to 80px.

ex:

ex is relative to the x-height of the current font. This unit is rarely used.

CSS Time units:

For a time we use s(second) and ms(millisecond). Relation: 1s=1000 ms.

CSS Angle units:

For angles, we use deg as a unit.

{
  transform: rotate(45deg);
  background-color: pink;
}