CSS Units - Understanding Absolute and Relative Units

In CSS, units are used to define the size of elements such as fonts, margins, padding, borders, and other properties. There are two types of units: relative units and absolute units.

Units categories:

Absolute Units
Relative Units

Absolute Units:

Absolute units are fixed and don’t change based on other elements. These units are typically used when you need precise control over sizing.

px (Pixels)
cm (Centimeters), mm (Millimeters), in (Inches)
pt (Points)
pc (Picas)

px (Pixels):

The most commonly used unit. 1px equals one dot on the screen.

Example

font-size: 30px;

width: 200px;

Try it yourself

cm (Centimeters), mm (Millimeters), in (Inches):

These are physical measurements, mostly used for print styles, not for screens.

Example

width: 5cm; /* 5 centimeters */

height: 2in; /* 2 inches */

Try it yourself

pt (Points):

Used in typography, where 1pt = 1/72 of an inch.

Example

font-size: 18pt; /* 1pt = 1/72 inch */

Try it yourself

pc (Picas):

1 pica equals 12 points.

Example

font-size: 2pc; /* 24 points */

Try it yourself

Relative Units:

Relative units are more flexible and scalable. They change in relation to other measurements (such as the viewport size or a parent element’s size).

% (Percentage)
em
rem (Root em)
vw (Viewport Width)
vh (Viewport Height)
vmin
vmax
ch

% (Percentage):

Defines size as a percentage of the parent element’s size.

Example

width: 50%; /* 50% of the parent element's width */

Try it yourself

em:

Relative to the font-size of the element itself or its parent. For example, if the parent element’s font-size is 16px, 2em would be 32px.

Example

font-size: 1.5em; /* 1.5 times the parent font size */

Try it yourself

rem (Root em):

Similar to em, but relative to the font-size of the root element (usually the <html> tag).

Example

font-size: 1.5rem; /* Relative to root font size (e.g., 16px) */

Try it yourself

vw (Viewport Width) and vh (Viewport Height):

vw (Viewport Width): 1vw equals 1% of the viewport’s width (browser window width).
vh (Viewport Height): 1vh equals 1% of the viewport’s height.

Example

width: 50vw; /* 50% of the viewport's width */

height: 50vh; /* 50% of the viewport's height */

Try it yourself

vmin and vmax:

vmin: The smaller value between vw and vh.
vmax: The larger value between vw and vh.

Example

width: 50vmin; /* 50% of the smaller dimension (width or height) */

height: 50vmax; /* 50% of the smaller dimension (width or height) */

Try it yourself

ch:

Relative to the width of the 0 character of the element’s font.

Example

width: 30ch; /* Width based on 30 characters */

Try it yourself

❮ Previous

Next ❯

Whereisstuff is simple learing platform for beginer to advance level to improve there skills in technologies.we will provide all material free of cost.you can write a code in runkit workspace and we provide some extrac features also, you agree to have read and accepted our terms of use, cookie and privacy policy.