Tutorials Tonight's Logo
Follow Us


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 of length. 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.

  • height: 25 px; is WRONG WAY there should be no space between value and unit
  • height: 25px; is RIGHT WAY

There are two types of length unit:

  1. Absolute unit
  2. Relative unit

1).Absolute unit

The absolute length unit is of fixed length. It shows exactly specified size on any screen.

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
cm 1cm = 1 centimeter (standard length unit)
mm 1mm(millimeter) = 1/10 centimeter
in 1in(inch) = 2.54 centimeter
pt 1pt(point) = 1/72 inch (0.3527mm)
px 1px(pixel) = 0.75pt
pc 1pc(picas) = 12pt
    margin: 1cm;  /*centimeter*/
    font-size: 5mm; /*millimeter*/
    margin: 1in; /*inch*/
    font-size: 10pt; /*point*/
▶ Run the code

2).Relative unit

The relative unit length specifies length according to another length property. It is flexible with the device to device and better to use in different size devices. It changes with different rendering medium.

Units Description
em It is relative to the current font size of the element.1em means the same size of font 2em means 2 times of current font-size.
ex It is relative to the current x-height of the font.
vh It is related to the height of viewport.1vh=1% of the height of the viewport.
vw It is related to the width of viewport.1vh=1% of the width of the viewport.
% It is relative to the font size of the parent element.
    width: 60vw;
    border: 1px solid silver;
    background-color: #00669956;
    font-size: 2em;
▶ Run the code


This paragraph has 2 times its regular font.

This box has 60% width of the viewport. This box has 60% width of the viewport. This box has 60% width of the viewport. This box has 60% width of the viewport.

More Learning

Want to learn more about programming and web development? We have a few recommendations for you.

Follow Us

Copyright © Tutorials Tonight. All Rights Are Reserved.