CSS Units
Units
Units in CSS allow us to set the size of a CSS property for an element or its content using several different units. There are mainly two categories of units available in CSS, which are given below-
Absolute Lengths:- The absolute length units are fixed and it is same for different sizes of screen layout. It is recommended to use where responsiveness is not being considered (i.e. print layout and where the output medium is known).
| Absolute Length Unit | Description |
|---|---|
| px | 1px = 1/96th of 1in |
| pt | 1pt = 1/72 of 1in |
| pc | 1pc = 12 pt |
| cm | centimeter |
| mm | millimeter (10mm = 1cm) |
| in | 1in = 96px = 2.54cm |
Relative Lengths:- The relative length units are useful for styling responsive web page, because they scale relative to the parent or window size.
| Relative Length Unit | Description |
|---|---|
| % | It is relative to the parent element. |
| em | It is relative to the current font-size of the element. |
| rem | It is relative to font-size of the root element (i.e. <html>). |
| ch | It is relative to width of the zero. |
| vh | It is relative to the height of the viewport (1vh = 1/100 of the viewports height). |
| vw | It is relative to the width of viewport (1vw = 1/100 of the viewports width). |
| vmin | It is relative to viewports smaller dimension (1vmin = 1/100 of viewports smaller dimension). |
| vmax | It is relative to viewports larger dimension (1vmax = 1/100 of viewports larger dimension). |
| ex | It is relative to the x-height of the current font. |
p {
font-size: 16px;
line-height: 2.5em;
}