CSS Units

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.

CSS Absolute 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 */
Try it now

Code Explanation

Note: In this example, different CSS measurement unit is used to provide different property value like width, height, margin, padding, etc.

Relative Units

Relative length units specify length value with respect to other length properties. These units are em, ex, etc.

Measuring With Relative Unit Em

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 */
Try it now

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

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;
Try it now

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.

Online Test / Quiz

Web Tutorials

CSS Units
Html Tutorial HTML
Javascript Tutorial JAVASCRIPT
Css Tutorial CSS
Bootstrap 5 Tutorial BOOTSTRAP 5
Bootstrap 4 Tutorial BOOTSTRAP 4