Different Units in CSS
CSS has several measurement units for length and size. These measuring units are used to specify a non-zero value to the CSS properties.
CSS units are used where we need to define size, length, etc. EX - height, width, border-size, padding, font-size etc.
CSS unit values are specified by a numerical value followed by a unit and there should be no space between number and unit. For example:
- height: 25 px; is WRONG WAY. There should be no space between value and unit.
- height: 25px; is RIGHT WAY
Types of CSS Units
CSS units can be categorized into two types:
1 .Absolute unit
These units are fixed and do not change with the size of the viewport. These units are used to specify the size of the element in the document. EX - height, width, border-size, padding, font-size etc.
Absolute units are independent of its parent element.
Device to device screen size varies so absolute length units are not recommended. It is dependent on an output medium. It can be used when the desired output is known.
These are absolute units with their description:
| Units | Description |
|---|---|
| px | Pixel is the smallest unit of measurement in CSS. |
| cm | Centimeter is a unit of length in the metric system. |
| mm | Millimeter. 1mm = 1/10th of 1cm. |
| in | Inch is a unit of length in the imperial system. 1in = 2.54cm. |
| pt | Point is a unit of length in typography. 1pt = 1/72 of 1in. |
| pc | Pica is a unit of length in typography. 1pc = 12pt. |
.px { font-size: 1px; }
.mm { font-size: 1mm; }
.cm { font-size: 1cm; }
.in { font-size: 1in; }
.pt { font-size: 10pt; }
.pc { font-size: 10pc; }2. Relative unit
The relative unit is a unit of measurement that is relative to another value. The value is relative to the parent element. This means if the parent element is changed, the child element will change accordingly.
Here is the list of relative units:
| Units | Description |
|---|---|
| em | It is relative to the current font size of the element. 1em means the current font size, 2em means twice the current font size, 0.5em means half the current font size. |
| rem | It is relative to the font size of the root element. 1rem means the font size of the root element, 2rem means twice the font size of the root element |
| ex | It is relative to the x-height of the current font. 1ex means the x-height of the current font. |
| ch | It is relative to the width of the glyph "0" (width of zero) of the current font. 1ch means the width of the glyph "0" (zero) of the current font. |
| vw | It is relative to 1% of the width of the viewport. 1vw means 1% of the width of the viewport. |
| vh | It is relative to 1% of the height of the viewport. 1vh means 1% of the height of the viewport. |
| vmin | It is relative to 1% of the smaller of the viewport's height and width. 1vmin means 1% of the smaller of the viewport's height and width. |
| vmax | It is relative to 1% of the larger of the viewport's height and width. 1vmax means 1% of the larger of the viewport's height and width. |
| % | It is relative to the parent element. 1% means 1% of the parent element. |
.box {
width: 60vw;
}
.em-font {
font-size: 2em;
}