CSS Units | CSS for Beginners - Class 6 PDF Download

CSS has several different units for expressing a length.
Many CSS properties take "length" values, such as width, margin, padding, font-size, etc.
Length is a number followed by a length unit, such as 10px, 2em, etc.

Example
Set different length values, using px (pixels):

h1 {

  font-size: 60px;

}

p {

  font-size: 25px;

  line-height: 50px;

}

Note: A whitespace cannot appear between the number and the unit. However, if the value is 0, the unit can be omitted.
For some CSS properties, negative lengths are allowed.
There are two types of length units: absolute and relative.

Absolute Lengths

* Pixels (px) are relative to the viewing device. For low-dpi devices, 1px is one device pixel (dot) of the display. For printers and high resolution screens 1px implies multiple device pixels.

Relative Lengths

Tip: The em and rem units are practical in creating perfectly scalable layout!
* Viewport = the browser window size. If the viewport is 50cm wide, 1vw = 0.5cm.

Browser Support