Main CSS Units

px (pixels)

Pixels are absolute units of measurement. They represent a fixed number of pixels on the screen, regardless of screen resolution. Pixels are widely used to set the sizes of elements, such as width, height, margins, and padding.

em

The em unit is a relative measurement based on the font size of the element. For example, if the font size of an element is 16px, then 1em equals 16px. em is useful for setting sizes that scale relative to the font size.

rem

rem is also a relative unit of measurement, but unlike em, it is based on the root font size (the font-size of the root element, usually <html>). Thus, 1rem always equals the root font size, regardless of the element's nesting.

vw (viewport width)

vw is a unit of measurement based on the viewport width. 1vw equals 1% of the viewport width. This unit is useful for creating responsive layouts where elements scale proportionally to the screen width.

vh (viewport height)

vh is a unit of measurement based on the viewport height. 1vh equals 1% of the viewport height. This is also useful for creating responsive layouts.

% (percentages)

Percentages are used to set the relative sizes of elements, such as width, height, margins, and padding, relative to the parent element. For example, a width of 50% means that the element will occupy half the width of its parent container.

vmin (viewport minimum)

vmin is a unit of measurement based on the minimum dimension of the viewport, meaning the smaller of the screen’s width or height. This is useful for creating elements that adapt to the smaller side of the screen.

vmax (viewport maximum)

vmax is a unit of measurement based on the maximum dimension of the viewport, meaning the larger of the screen’s width or height. This is useful for creating elements that adapt to the larger side of the screen.