CSS Units

In CSS, units are used to specify values for various properties, such as width, height, margin, padding, font-size, etc. Correctly choosing and using units is crucial for creating scalable, maintainable, and responsive layouts.

CSS units can be divided into two main categories: Absolute Units and Relative Units.

Absolute Units

Absolute units are fixed; they do not depend on the size of any other element. They represent a physical length on any device.

px (Pixels): This is the most common and basic unit. 1 pixel corresponds to one physical dot on the display device. For screen displays, px is a very precise unit.
cm, mm, in: Centimeters, millimeters, inches. These units are more commonly used for print style sheets (@media print).
pt (Points): 1/72 of an inch.
pc (Picas): 12 points.

css

div {
  width: 200px;
  border: 1px solid black;
}

Relative Units

The values of relative units are calculated relative to other length values. Using relative units makes your design more flexible and scalable.

Font-Relative Units

em: Relative to the current element's font-size. If used on the font-size property itself, it is relative to the parent element's font-size. For example, if an element's font-size is 16px, then 2em equals 32px. The em unit can compound, making it difficult to manage in deep nesting.
rem (root em): Relative to the root element's (<html>) font-size. This is a very powerful unit because it is not affected by the parent element's font size, avoiding the compounding issue of em. In modern Web design, rem is the preferred unit for setting font sizes, spacing, and component dimensions.

css

html {
  font-size: 16px;
}

.parent {
  font-size: 1.25em; /* 16px * 1.25 = 20px */
}

.child {
  font-size: 1.5rem; /* 16px * 1.5 = 24px, not affected by parent */
  padding: 1rem; /* 16px */
}

Viewport-Relative Units

The Viewport is the visible area in the browser window.

vw (viewport width): 1% relative to the viewport width. 10vw equals 10% of the viewport width.
vh (viewport height): 1% relative to the viewport height. 100vh equals the height of the entire viewport.
vmin: The smaller value between vw and vh.
vmax: The larger value between vw and vh.

Viewport units are very useful when creating full-screen hero sections or fonts and layouts that need to scale with screen size.

css

.fullscreen-section {
  height: 100vh;
}

h1 {
  font-size: 5vw;
}

Percentages (`%`)

The % unit is always relative to a property value of the parent element. For example, width: 50% means the element's width is 50% of its parent element's width.

css

.parent {
  width: 400px;
}

.child {
  width: 50%; /* 400px * 0.5 = 200px */
}

Unit Selection Suggestions

Font Size: Prefer rem for accessibility and scalability.
Margins and Padding: Use rem to keep spacing in harmonious proportion with font size. In some cases, px is used for fine-tuning, and % for fluid layouts.
Borders: Usually use px, as borders often need to be precise thin lines.
Layout Width/Height: Use % to create fluid layouts, and vw/vh for viewport-related layouts.
Media Queries: Use em or rem to set breakpoints, which allows your responsive design to better adapt to user-adjusted font sizes.

CSS Units ​

Absolute Units ​

Relative Units ​

Font-Relative Units ​

Viewport-Relative Units ​

Percentages (%) ​