CSS Units List

What Are CSS Units?

CSS units are values used with CSS properties to define measurements. For example, you can use units to set width, height, margin, padding, font size, border radius, animation duration, rotation angle, and more.

.card {
  width: 100%;
  max-width: 720px;
  padding: 1rem;
  font-size: 1rem;
  border-radius: 0.75rem;
}

In this example, %, px, and rem are CSS units.

CSS Units List in Table Format

Absolute Units vs Relative Units

CSS units are commonly grouped into absolute and relative units.

For modern responsive websites, relative units are usually preferred for spacing, typography, and layout sizing.

Most Used CSS Units for Beginners

• px: useful for borders, icons, and small fixed details.
• %: useful for flexible widths and responsive layouts.
• rem: useful for consistent font sizes and spacing.
• em: useful when spacing should scale with the current text size.
• vw and vh: useful for viewport-based layouts.
• fr: useful for CSS Grid column and row sizing.
• ch: useful for readable text line lengths.

Responsive CSS Unit Examples

.container {
  width: min(100% - 2rem, 1200px);
  margin-inline: auto;
}

.article {
  max-width: 65ch;
  line-height: 1.7;
}

.hero-title {
  font-size: clamp(2rem, 6vw, 4.5rem);
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}

Viewport Units and Mobile Browsers

Traditional vh can behave unexpectedly on mobile browsers because browser toolbars can appear and disappear. Modern viewport units help solve this issue.

• svh: small viewport height.
• lvh: large viewport height.
• dvh: dynamic viewport height.

.hero {
  min-height: 100dvh;
}

Use dvh when a layout should adapt as mobile browser UI changes.

Container Query Units

Container query units size elements based on the nearest query container instead of the viewport. They are useful for component-based responsive design.

.card-wrapper {
  container-type: inline-size;
}

.card-title {
  font-size: clamp(1rem, 6cqi, 2rem);
}

In this example, the title size responds to the component container width.

CSS Units and Accessibility

• Use relative units like rem for scalable text and spacing.
• Avoid fixed heights that cut off content when users zoom or increase font size.
• Use readable line lengths with ch.
• Use unitless line-height for better text scaling.
• Test layouts at 200% zoom and mobile screen sizes.
• Avoid using viewport units in ways that trap or hide content on mobile.

CSS Units and SEO

CSS units do not directly improve rankings, but they affect responsive design, readability, accessibility, layout stability, and page experience.

• Responsive units improve mobile-friendly layouts.
• Readable font and spacing units improve content consumption.
• Stable layout sizing can support better Core Web Vitals.
• Accessible units support users who zoom or customize text size.
• Flexible units make websites easier to maintain across devices.

Common CSS Unit Mistakes

• Using fixed pixel widths that break mobile layouts.
• Using vh without testing mobile browser toolbar behavior.
• Setting fixed heights on text containers and cutting off content.
• Using em deeply without understanding compounding behavior.
• Using too many different unit types without a system.
• Forgetting that 0 does not need a unit.
• Using small fixed font sizes that do not scale well.

CSS Unit Best Practices

• Use rem for most font sizes and spacing tokens.
• Use %, fr, and minmax() for flexible layouts.
• Use px for borders, icons, and very small fixed details.
• Use ch for readable text width.
• Use clamp() with viewport units for fluid typography.
• Use dvh carefully for mobile-friendly full-height layouts.
• Use unitless line-height.
• Build a consistent spacing and sizing scale.
• Test units across mobile, tablet, desktop, zoom, and text scaling.

Key Takeaways

• CSS units define measurements for layout, typography, spacing, animation, and more.
• Absolute units include px, pt, cm, mm, and in.
• Relative units include %, em, rem, vw, vh, ch, and fr.
• Modern viewport units include svh, lvh, and dvh.
• Container query units include cqw, cqh, cqi, and cqb.
• Use relative units for responsive and accessible websites.