CSS Units - In CSS, length is measured by either an absolute value or a relative value. An absolute unit is a fixed value such as pixel, point, inches, etc while a relative unit such as %, em etch is relative to the parent element.
Please keep in mind that, the CSS unit is applicable only for a non-zero value. Specify length with value including its unit otherwise, it would not work. If the length value is zero(0) then, in this case, you can remove the CSS unit.
The absolute length units are fixed and measured by these units such as cm, mm, in, px, pt, pc.
| Unit | Description |
|---|---|
| cm | centimeters |
| px * | pixels (1px = 1/96th of 1in) |
| in | inches (1in = 96px = 2.54cm) |
| mm | millimeters |
| pc | picas (1pc = 12 pt) |
| pt | points (1pt = 1/72 of 1in) |
In this section, all the CSS measurement unit is described. This unit is categorized into two parts namely absolute and relative units.
Source Code
b{ margin: 0.2in; } /* inches */
h2 { line-height: 3cm; } /* centimeters */
h3 { word-spacing: 4mm; } /* millimeters */
h4 { font-size: 12pt; } /* points */
h5 { font-size: 1pc; } /* picas */
h6 { font-size: 12px; } /* picas */
Code Explanation
Note: In this example, different CSS measurement unit is used to provide different property value like width, height, margin, padding, etc.
Relative length units specify length value with respect to other length properties. These units are em, ex, etc.
Default font size is 16px hence 1em is equal to 16px;
Source Code
#topParaContent {
font-size: 2.5em; /* 40px/16=2.5em */
}
#secondParaContent {
font-size: 1.875em; /* 30px/16=1.875em */
}
#thirdParaContent {
font-size: 0.875em; /* 14px/16=0.875em */
}
Code Explanation
Note: In this example, font size is measured using the em unit.It is a ratio of available font size and browser default font size i.e (em = available font size / browser default font size).
Responsive font size works on the basis of the viewport width and viewport height. The viewport is the size of the browser window.
1vw = 1% of viewport width(Browser width).
If the width of the viewport(browser window) is 100px then the 1vw is equal to 1px.
Source Code
.firstParaContent {
font-size: 5vw;
}
.secondParaContent {
font-size: 10vw;
}
Code Explanation
Note: In this example, font size is measured with the help of responsive font size. This is based on the concept of viewport width and height. Basically, Viewport is the size of the browser window.
