Types Of Relative Units In Css

This css units are used to set the height, width or font-size to the HTML element. CSS has different types of units some relative units are listed here. It change on screen size.

• % Relative to the parent element
• em Relative to the font-size of the element (2em means 2 times the size of the current font)
• rem Relative to font-size of the root element
• vh Relative to the height of the viewport
• vw Relative to the width of the viewport
• vmin Relative to viewport's mininum smaller dimension
• vmax Relative to viewport's maximum larger dimension

Types Of Absolute Units In Css

CSS has different types of units some absolute units are listed here. It does not change on screen size.

• px pixels (1px = 1/96th of 1in)
• in inches (1in = 96px = 2.54cm)
• pt points (1pt = 1/72 of 1in)
• pc picas (1pc = 12 pt)
• cm centimeters
• mm millimeters

Example of css units:

p{
   width: 20px; /* unit in pixel*/
   width: 1rem;  /* number of times of root element unit*/
   width: 1em;   /* number of times of current unit.*/
   width: 55%;   /* percent unit */
   width: 40mm; /* millimeter unit */
}