CSS Units

CSS units determines the size of a property you’re setting for an element or its content. For example, if you wanted to set the property margin of a paragraph, you would give it a specific value. This value includes the CSS unit.CSS has several options for which units to use when determining the size of various CSS properties.Let’s look at a small example:

In this case, margin is the property, 20px; is the value, and px (or “pixel”) is the CSS unit.

Many CSS properties take “length” values, such as widthmarginpaddingfont-size, etc.

Length is a number followed by a length unit, such as 10px2em, etc.

h1 {
  font-size: 80;

p {
  font-size: 30px;
  line-height: 60px;

 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.

CSS Units-absolute lengths

Units that are “absolute” are the same size regardless of the parent element or window size. This means a property set with a value that has an absolute unit will be that size when looked at on a phone or on a large monitor (and everything in between!)

Absolute units can be useful when working on a project where responsiveness is not being considered. For example, desktop apps that can’t be resized can be styled for the default dimensions. If the window doesn’t scale, you don’t need the content to either.

Absolute UnitDescriptionExample
px1/96 of 1 inch (96px = 1 inch)font-size: 12px;
pt1/72 of 1 inch (72pt = 1 inch)font-size: 12pt;
pc12pt = 1pcfont-size: 1.2pc;
cmcentimeterfont-size: 0.6cm;
mmmillimeter (10 mm = 1 cm)font-size: 4mm;
ininchesfont-size: 0.2in;

Pixels (px) are typically the most popular absolute unit for screens. Centimeters, millimeters, and inches are more common for print and you may not have even known they were options

CSS Units-relative lengths

Relative units are useful for styling responsive sites because they scale relative to the parent or window size (depending on the unit).Relative units can be a little more difficult than absolute units in determining which to use, so let’s go through your options in detail.

Relative UnitDescription
%Relative to the parent element’s value for that property
emRelative to the current font-size of the element
remRelative to the font-size of the root (e.g. the <html> element). “rem” = “root em”
chNumber of characters (1 character is equal to the width of the current font’s 0/zero)
vhRelative to the height of the viewport (window or app size). 1vh = 1/100 of the viewport’s height
vwRelative to the width of viewport. 1vw = 1/100 of the viewport’s width.
vminRelative to viewport’s smaller dimension (e.g. for portrait orientation, the width is smaller than the height so it’s relative to the width). 1vmin = 1/100 of viewport’s smaller dimension.
vmaxRelative to viewport’s larger dimension (e.g. height for portrait orientation). 1vmax = 1/100 of viewport’s larger dimension.
exRelative to height of the current font’s lowercase “x”.
CSS Units