CSS Units Explained

Introduction

CSS uses units to describe sizes.

You use units for things like:

1font-size: 16px;2padding: 1rem;3width: 50%;4height: 100vh;

A unit tells the browser how large something should be.

Some units are fixed.

Some units are relative.

Some units depend on the parent element.

Some depend on the root font size.

Some depend on the size of the browser viewport.

Understanding CSS units helps you control spacing, text size, layout, and responsive design more confidently.

The most common CSS units include:

1px2%3em4rem5vw6vh7vmin8vmax9ch10ex11lh12rlh

You do not need to use every unit immediately.

For most everyday CSS, you will use a small set often:

1px2%3em4rem5vw6vh

This guide explains what those units mean, how they behave, and when to use them.

What Is a CSS Unit?

A CSS unit describes a measurement.

Example:

1.box {2  width: 300px;3}

The value is:

1300px

This has two parts:

1300 = the number2px  = the unit

Together, they tell the browser how wide the box should be.

Another example:

1.card {2  padding: 2rem;3}

The value is:

12rem

This means the padding is based on the root font size.

CSS units let you describe sizes in different ways depending on what you are trying to build.

Absolute and Relative Units

CSS units can be grouped into two broad categories:

1absolute units2relative units

Absolute units are fixed in relation to a physical or reference measurement.

The most common absolute unit in web design is:

1px

Relative units depend on something else.

Examples:

1%2em3rem4vw5vh6ch7lh

Relative units are often better for responsive design because they can adapt to context.

The px Unit

The px unit means CSS pixel.

Example:

1p {2  font-size: 16px;3}

This sets the paragraph font size to 16px.

Pixels are easy to understand because they feel direct.

Example:

1.card {2  width: 300px;3  padding: 20px;4  border-radius: 8px;5}

This gives the card a fixed width, fixed padding, and fixed corner radius.

Pixels are useful when you want a precise size.

Common Uses for px

Pixels are commonly used for:

1borders2small spacing values3icon sizes4box shadows5border-radius6precise layout details

Examples:

1.button {2  border: 1px solid #cccccc;3  border-radius: 8px;4}

1.icon {2  width: 24px;3  height: 24px;4}

1.card {2  box-shadow: 0 4px 12px rgb(0 0 0 / 0.15);3}

For small visual details, pixels are often simple and practical.

Pixels Are Not Always Best for Responsive Layout

A fixed pixel width can cause problems on small screens.

Example:

1.card {2  width: 600px;3}

On a wide screen, this may look fine.

On a narrow phone screen, 600px may be too wide.

The card may overflow the viewport.

A more flexible version is:

1.card {2  width: 100%;3  max-width: 600px;4}

This means:

1Use the available width.2But do not grow wider than 600px.

This is a common responsive pattern.

The % Unit

The percentage unit is relative to another size.

Example:

1.box {2  width: 50%;3}

This usually means the box should be half the width of its containing block.

HTML:

1<div class=”container”>2  <div class=”box”>Box</div>3</div>

CSS:

1.container {2  width: 800px;3}4 5.box {6  width: 50%;7}

The .box width becomes 400px.

Why?

Because 50% of 800px is 400px.

Percentages Depend on the Property

Percentages do not always refer to the same thing.

For width, a percentage usually refers to the width of the containing block.

Example:

1.child {2  width: 50%;3}

For height, a percentage depends on whether the parent has a definite height.

Example:

1.parent {2  height: 400px;3}4 5.child {6  height: 50%;7}

The child height becomes 200px.

But this may not work as expected:

1.parent {2  /* no fixed height */3}4 5.child {6  height: 50%;7}

If the parent height is not definite, the child’s percentage height may not resolve the way you expect.

This is a common layout issue.

Percentage Width Example

HTML:

1<div class=”wrapper”>2  <div class=”sidebar”>Sidebar</div>3  <div class=”content”>Content</div>4</div>

CSS:

1.wrapper {2  width: 100%;3}4 5.sidebar {6  width: 30%;7}8 9.content {10  width: 70%;11}

The sidebar takes 30% of the wrapper.

The content takes 70% of the wrapper.

Percentages are useful when you want flexible layouts.

However, modern layout tools such as Flexbox and Grid often make this easier.

Example with Flexbox:

1.wrapper {2  display: flex;3}4 5.sidebar {6  flex: 0 0 30%;7}8 9.content {10  flex: 1;11}

Percentages for Spacing

Percentages can also be used for padding and margins.

Example:

1.box {2  padding: 10%;3}

This can be surprising.

Percentage padding is often based on the width of the containing block, not the height.

Example:

1.box {2  padding-top: 50%;3}

This can be used to create aspect-ratio tricks, although modern CSS has a better property:

1.box {2  aspect-ratio: 16 / 9;3}

Use percentage spacing carefully because it may not behave the way beginners expect.

The em Unit

The em unit is relative to font size.

In many cases:

11em = the font size of the current element

Example:

1p {2  font-size: 20px;3  margin-bottom: 1em;4}

Here, the paragraph font size is 20px.

So:

11em = 20px

The paragraph’s bottom margin becomes 20px.

If the font size changes, the em value changes too.

em for Font Size

When em is used for font-size, it is relative to the parent element’s font size.

Example:

1.parent {2  font-size: 20px;3}4 5.child {6  font-size: 1.5em;7}

HTML:

1<div class=”parent”>2  <p class=”child”>Text</p>3</div>

The child font size becomes 30px.

Why?

11.5em = 1.5 × parent font size21.5 × 20px = 30px

This is useful, but it can also create compounding effects.

em Can Compound

Nested em font sizes can grow or shrink through the HTML tree.

Example:

1.list {2  font-size: 1.2em;3}

HTML:

1<ul class=”list”>2  <li>First item</li>3  <li>4    Second item5    <ul class=”list”>6      <li>Nested item</li>7    </ul>8  </li>9</ul>

If each nested .list uses font-size: 1.2em, the nested list becomes larger than the parent list.

This happens because each level is based on the font size of its parent.

That can be useful in some designs.

But it can also be accidental.

em for Padding and Margin

When em is used for properties other than font-size, it is usually relative to the element’s own font size.

Example:

1.button {2  font-size: 16px;3  padding: 0.75em 1em;4}

The vertical padding is:

10.75 × 16px = 12px

The horizontal padding is:

11 × 16px = 16px

If the button font size increases, the padding increases too.

Example:

1.button-large {2  font-size: 20px;3}

A larger button gets larger padding automatically.

This is one of the best uses of em.

Practical em Button Example

HTML:

1<button class=”button”>Save</button>2<button class=”button button-large”>Continue</button>

CSS:

1.button {2  font-size: 1rem;3  padding: 0.75em 1em;4  border-radius: 0.5em;5}6 7.button-large {8  font-size: 1.25rem;9}

The large button has a larger font size.

Because padding and border radius use em, they scale with the button text.

This keeps the button proportions consistent.

When to Use em

Use em when a size should scale with the current element’s font size.

Good uses:

1.button {2  padding: 0.75em 1em;3}

1.badge {2  border-radius: 0.5em;3}

1.icon {2  width: 1em;3  height: 1em;4}

This is useful for components where spacing should adjust with text size.

Be careful when using em for nested font sizes because values can compound.

The rem Unit

The rem unit means root em.

It is relative to the root element’s font size.

The root element is usually:

1<html>

In many browsers, the default root font size is commonly 16px.

So if the root font size is 16px:

11rem = 16px22rem = 32px30.5rem = 8px

Example:

1.card {2  padding: 2rem;3}

If 1rem is 16px, then 2rem is 32px.

rem Depends on the Root Font Size

Example:

1html {2  font-size: 16px;3}4 5.card {6  padding: 2rem;7}

The padding is 32px.

Now change the root font size:

1html {2  font-size: 20px;3}4 5.card {6  padding: 2rem;7}

The padding becomes 40px.

Why?

12rem = 2 × root font size22 × 20px = 40px

This makes rem useful for consistent spacing systems.

rem Does Not Compound Like em

This is a major difference.

Example:

1.parent {2  font-size: 20px;3}4 5.child {6  margin-top: 2rem;7}

The child’s margin is based on the root font size, not the parent font size.

If the root is 16px, then:

12rem = 32px

The parent’s 20px font size does not change the rem margin.

This makes rem more predictable than em for page-level spacing.

Common Uses for rem

The rem unit is commonly used for:

1font sizes2padding3margin4gap5max-width6layout spacing

Examples:

1body {2  font-size: 1rem;3}

1.card {2  padding: 1.5rem;3  margin-bottom: 2rem;4}

1.grid {2  gap: 1rem;3}

1.container {2  max-width: 70rem;3}

rem is often a good default unit for spacing and typography.

rem for Font Sizes

Example:

1body {2  font-size: 1rem;3}4 5h1 {6  font-size: 2.5rem;7}8 9p {10  font-size: 1rem;11}

If the root font size is 16px, then:

1h1 = 40px2p  = 16px

Using rem can help keep type sizes consistent across the site.

It also respects changes to the root font size.

Avoid Setting html { font-size: 10px; }

Some older CSS tutorials use this pattern:

1html {2  font-size: 10px;3}

Then:

11.6rem = 16px

This may seem convenient for math.

But it can interfere with user font size preferences.

A safer approach is to leave the root font size alone or use percentages carefully.

Example:

1html {2  font-size: 100%;3}

Then use rem normally:

1body {2  font-size: 1rem;3}

This is usually more respectful of browser and user settings.

em vs rem

The difference is:

1em  = relative to the current element or parent font size, depending on the property2rem = relative to the root font size

Example:

1html {2  font-size: 16px;3}4 5.parent {6  font-size: 20px;7}8 9.child-em {10  font-size: 2em;11}12 13.child-rem {14  font-size: 2rem;15}

The .child-em font size is:

12 × 20px = 40px

The .child-rem font size is:

12 × 16px = 32px

em depends on local context.

rem depends on the root.

When to Use em vs rem

Use rem for consistent site-wide sizing.

Examples:

1.card {2  padding: 1.5rem;3}

1h1 {2  font-size: 2.5rem;3}

Use em when a value should scale with the element’s own text size.

Examples:

1.button {2  padding: 0.75em 1em;3}

1.icon {2  width: 1em;3  height: 1em;4}

A practical rule is:

1Use rem for layout spacing.2Use em for component parts that should scale with text.

This is not a strict rule, but it works well in many projects.

The vw Unit

The vw unit means viewport width.

The viewport is the visible area of the browser window.

11vw = 1% of the viewport width

So:

1100vw = full viewport width250vw  = half viewport width

Example:

1.hero {2  width: 100vw;3}

This makes the hero as wide as the viewport.

vw Example

If the viewport is 1200px wide:

11vw = 12px210vw = 120px350vw = 600px4100vw = 1200px

CSS:

1.hero-title {2  font-size: 8vw;3}

At 1200px wide:

18vw = 96px

At 400px wide:

18vw = 32px

The font size changes with the viewport width.

This can be useful for responsive headings, but it needs limits.

Be Careful with 100vw

This can sometimes cause horizontal scrolling:

1.section {2  width: 100vw;3}

Why?

On some pages, the vertical scrollbar takes up space.

100vw can include the scrollbar area, making the element slightly wider than the visible page content.

Often this is safer:

1.section {2  width: 100%;3}

Use 100vw when you specifically need viewport-based width.

Use 100% when you want to fill the parent.

vw for Responsive Typography

Viewport units can create fluid typography.

Example:

1h1 {2  font-size: 8vw;3}

But this can become too small on narrow screens and too large on wide screens.

A better modern approach is clamp():

1h1 {2  font-size: clamp(2rem, 8vw, 5rem);3}

This means:

1minimum: 2rem2preferred: 8vw3maximum: 5rem

The heading scales with the viewport, but it does not become smaller than 2rem or larger than 5rem.

The vh Unit

The vh unit means viewport height.

11vh = 1% of the viewport height

So:

1100vh = full viewport height250vh  = half viewport height

Example:

1.hero {2  min-height: 100vh;3}

This makes the hero at least as tall as the viewport.

This is common for full-screen hero sections.

vh Example

If the viewport is 800px tall:

11vh = 8px250vh = 400px3100vh = 800px

CSS:

1.panel {2  min-height: 50vh;3}

The panel is at least half the viewport height.

Be Careful with 100vh on Mobile

On mobile browsers, the visible viewport can change as the browser address bar appears or disappears.

This can make 100vh behave unexpectedly.

Modern CSS has newer viewport units to help with this:

1svh2lvh3dvh

These are related to viewport height but handle mobile browser UI in different ways.

A common modern option is:

1.hero {2  min-height: 100dvh;3}

The dvh unit tracks the dynamic viewport height.

New Viewport Units: svh, lvh, and dvh

CSS has newer viewport height units:

1svh = small viewport height2lvh = large viewport height3dvh = dynamic viewport height

These are useful for mobile layouts.

The small viewport height is based on the smaller possible viewport.

The large viewport height is based on the larger possible viewport.

The dynamic viewport height updates as the browser interface changes.

Example:

1.hero {2  min-height: 100dvh;3}

This can be better than 100vh for full-height sections on mobile devices.

Viewport Width Variants

There are also width-related dynamic viewport units:

1svw2lvw3dvw

They follow the same idea as the height units but apply to viewport width.

In many layouts, vw is still enough for width.

The height units are often more noticeable on mobile because browser toolbars affect vertical space.

The vmin Unit

The vmin unit is based on the smaller viewport dimension.

11vmin = 1% of the smaller side of the viewport

If the viewport is:

11200px wide2800px tall

The smaller side is 800px.

So:

11vmin = 8px

Example:

1.logo {2  width: 20vmin;3  height: 20vmin;4}

This keeps the logo size related to the smaller side of the viewport.

The vmax Unit

The vmax unit is based on the larger viewport dimension.

11vmax = 1% of the larger side of the viewport

If the viewport is:

11200px wide2800px tall

The larger side is 1200px.

So:

11vmax = 12px

Example:

1.background-shape {2  width: 80vmax;3  height: 80vmax;4}

This can be useful for large decorative elements.

vmin and vmax Example

CSS:

1.circle {2  width: 30vmin;3  height: 30vmin;4  border-radius: 50%;5}

The circle scales with the smaller viewport dimension.

This helps it fit on both portrait and landscape screens.

For example:

1viewport: 1000px × 600px230vmin = 30% of 600px = 180px

1viewport: 400px × 800px230vmin = 30% of 400px = 120px

The circle stays proportional to the available screen.

The ch Unit

The ch unit is based on the width of the 0 character in the current font.

Example:

1p {2  max-width: 65ch;3}

This means the paragraph can be about 65 characters wide.

This is useful for readable text lines.

Long lines can be hard to read.

A common pattern is:

1.article {2  max-width: 65ch;3}

This keeps article text at a comfortable line length.

ch Example

HTML:

1<article class=”article”>2  <p>3    CSS units help control size, spacing, and layout.4  </p>5</article>

CSS:

1.article {2  max-width: 65ch;3}

The article width is based on the font’s character width.

This is often more meaningful for text than using a fixed pixel width.

Compare:

1.article {2  max-width: 700px;3}

This is based on pixels.

1.article {2  max-width: 65ch;3}

This is based on readable line length.

The ex Unit

The ex unit is based on the x-height of the current font.

The x-height is roughly the height of lowercase letters such as x.

Example:

1.icon {2  height: 1ex;3}

In everyday CSS, ex is less commonly used than em, rem, or ch.

You may see it in typography-focused layouts.

For most beginner projects, you do not need to use ex often.

The lh Unit

The lh unit is based on the computed line height of the element.

Example:

1p {2  line-height: 1.6;3  margin-bottom: 1lh;4}

This sets the bottom margin to one line height.

If the paragraph line height changes, the margin changes with it.

This can be useful for typography and vertical rhythm.

The rlh Unit

The rlh unit is based on the root element’s line height.

It is similar in idea to rem, but for line height.

Example:

1.section {2  padding-block: 2rlh;3}

This sets vertical padding based on the root line height.

In many beginner projects, rem is more common.

But lh and rlh can be useful when spacing should follow line height.

The fr Unit

The fr unit is used in CSS Grid.

It means a fraction of available space.

Example:

1.grid {2  display: grid;3  grid-template-columns: 1fr 2fr;4}

This creates two columns.

The second column gets twice as much available space as the first.

If the available width is 900px, and there are no gaps:

11fr + 2fr = 3fr2first column = 300px3second column = 600px

The fr unit is not used everywhere.

It is mainly for CSS Grid track sizing.

fr Example

HTML:

1<div class=”layout”>2  <aside>Sidebar</aside>3  <main>Main content</main>4</div>

CSS:

1.layout {2  display: grid;3  grid-template-columns: 1fr 3fr;4  gap: 1rem;5}

The main content column is three times as wide as the sidebar column.

The fr unit makes proportional grid layouts easier.

Time Units: s and ms

CSS also has time units.

They are used for animations and transitions.

Examples:

1.button {2  transition: background-color 200ms ease;3}

1.spinner {2  animation: spin 1s linear infinite;3}

The units are:

1s  = seconds2ms = milliseconds

Examples:

11s = 1000ms20.5s = 500ms3200ms = 0.2s

These are not layout units, but they are still CSS units.

Angle Units: deg, turn, rad, and grad

CSS has angle units for rotations and gradients.

The most common is:

1deg

Example:

1.arrow {2  transform: rotate(45deg);3}

You may also see:

1.spinner {2  transform: rotate(0.5turn);3}

Here:

11turn = 360deg20.5turn = 180deg

For most beginner CSS, deg is the easiest angle unit to use.

Resolution Units

CSS also has resolution units such as:

1dpi2dppx3dpcm

These are used in media queries and image-related contexts.

Example:

1@media (min-resolution: 2dppx) {2  .logo {3    background-image: url(“[email protected]”);4  }5}

These are more advanced and less common in beginner layout work.

You do not need them for basic sizing and spacing.

Choosing the Right Unit

There is no single best CSS unit.

The best unit depends on what the value should respond to.

Ask:

1Should this size stay fixed?2Should it scale with text?3Should it scale with the root font size?4Should it scale with the parent?5Should it scale with the viewport?6Should it represent readable line length?7Should it divide available grid space?

Then choose the unit that matches the behaviour you want.

Use px for Small Fixed Details

Good uses:

1.card {2  border: 1px solid #dddddd;3  border-radius: 8px;4}

1.icon {2  width: 24px;3  height: 24px;4}

Pixels are clear and predictable for small visual details.

Avoid using fixed pixel sizes for everything.

Too many fixed sizes can make layouts less responsive.

Use % for Parent-Based Sizing

Good uses:

1.image {2  width: 100%;3}

1.sidebar {2  width: 30%;3}

1.progress-bar {2  width: 75%;3}

Percentages are useful when the size should relate to the parent or containing block.

Be careful with percentage heights.

They need a definite parent height to behave predictably.

Use rem for Consistent Spacing

Good uses:

1.card {2  padding: 1.5rem;3  margin-bottom: 2rem;4}

1.grid {2  gap: 1rem;3}

1h1 {2  font-size: 2.5rem;3}

rem is predictable because it is based on the root font size.

It is often a strong default choice for typography and spacing.

Use em for Component Scaling

Good uses:

1.button {2  padding: 0.75em 1em;3}

1.badge {2  font-size: 0.875rem;3  padding: 0.25em 0.5em;4}

1.icon {2  width: 1em;3  height: 1em;4}

em is useful when the spacing or size should scale with the component’s text.

Use vw and vh for Viewport-Based Layout

Good uses:

1.hero {2  min-height: 100vh;3}

1.full-width {2  width: 100vw;3}

1.heading {2  font-size: clamp(2rem, 6vw, 5rem);3}

Viewport units are useful for full-screen sections and fluid typography.

Be careful with 100vh on mobile.

Consider 100dvh when you need dynamic viewport height.

Use ch for Readable Text Width

Good use:

1.article {2  max-width: 65ch;3}

This keeps text lines at a readable length.

The ch unit is especially useful for articles, documentation, blog posts, and long-form text.

Use fr for Grid Columns

Good use:

1.layout {2  display: grid;3  grid-template-columns: 1fr 3fr;4  gap: 1rem;5}

The fr unit is designed for CSS Grid.

Use it to divide available space into flexible tracks.

Common Mistake: Using px for Everything

This can work at first:

1.card {2  width: 600px;3  padding: 40px;4  font-size: 18px;5}

But it may not adapt well to different screens or user settings.

A more flexible version:

1.card {2  width: 100%;3  max-width: 37.5rem;4  padding: 2rem;5  font-size: 1rem;6}

This combines flexible width, a maximum size, and root-relative spacing.

Common Mistake: Confusing em and rem

This can surprise you:

1.parent {2  font-size: 20px;3}4 5.child {6  font-size: 2em;7}

The child is 40px.

If you expected it to be based on the root font size, use rem:

1.child {2  font-size: 2rem;3}

Remember:

1em follows local font size.2rem follows root font size.

Common Mistake: Percentage Heights Not Working

This often does not work as expected:

1.child {2  height: 100%;3}

Why?

The parent may not have a definite height.

Example:

1.parent {2  /* no set height */3}4 5.child {6  height: 100%;7}

The child does not know what 100% should be based on.

A possible fix:

1.parent {2  height: 400px;3}4 5.child {6  height: 100%;7}

Or use viewport height if you want full-screen height:

1.child {2  min-height: 100vh;3}

Common Mistake: 100vw Causing Horizontal Scroll

This can create unwanted horizontal scrolling:

1.full-width {2  width: 100vw;3}

If the page has a vertical scrollbar, 100vw may be slightly wider than the visible content area.

Often this is enough:

1.full-width {2  width: 100%;3}

Use 100vw only when you specifically need the full viewport width.

Common Mistake: Viewport Text Too Large or Too Small

This can be risky:

1h1 {2  font-size: 10vw;3}

On a very small screen, it may be too small or awkward.

On a very large screen, it may become too large.

Better:

1h1 {2  font-size: clamp(2rem, 10vw, 6rem);3}

This keeps the font size within a useful range.

Common Mistake: Removing User Font Preferences

Avoid this unless you have a strong reason:

1html {2  font-size: 10px;3}

This can interfere with user preferences.

A better default is:

1html {2  font-size: 100%;3}

Then use rem values:

1body {2  font-size: 1rem;3}

This keeps your CSS more flexible and accessible.

The calc() Function

The calc() function lets you mix units.

Example:

1.sidebar {2  width: calc(100% – 2rem);3}

This means:

1Take 100% of the available width and subtract 2rem.

Another example:

1.hero {2  min-height: calc(100vh – 4rem);3}

This can be useful when you need to account for a header height.

calc() Example

HTML:

1<header class=”site-header”>Header</header>2<main class=”main”>Main content</main>

CSS:

1.site-header {2  height: 4rem;3}4 5.main {6  min-height: calc(100vh – 4rem);7}

The main area is at least the viewport height minus the header height.

This is a common layout pattern.

The min() Function

The min() function chooses the smaller value.

Example:

1.card {2  width: min(100%, 40rem);3}

This means:

1Use 100% width if it is smaller.2Use 40rem if 40rem is smaller.

This is useful for responsive containers.

It is similar to:

1.card {2  width: 100%;3  max-width: 40rem;4}

The max() Function

The max() function chooses the larger value.

Example:

1.box {2  width: max(20rem, 50%);3}

This means:

1Use whichever is larger: 20rem or 50%.

This is less common than min() and clamp(), but it is useful when something should not become too small.

The clamp() Function

The clamp() function sets a minimum, preferred value, and maximum.

Syntax:

1clamp(minimum, preferred, maximum)

Example:

1h1 {2  font-size: clamp(2rem, 5vw, 4rem);3}

This means:

1Do not go below 2rem.2Prefer 5vw.3Do not go above 4rem.

This is excellent for fluid typography.

clamp() for Spacing

You can also use clamp() for spacing.

Example:

1.section {2  padding-block: clamp(2rem, 8vw, 6rem);3}

On small screens, the section has at least 2rem vertical padding.

As the viewport grows, the padding grows.

But it stops at 6rem.

This creates responsive spacing without many media queries.

Building a Simple Spacing Scale

A spacing scale helps keep your design consistent.

Example:

1:root {2  –space-1: 0.25rem;3  –space-2: 0.5rem;4  –space-3: 1rem;5  –space-4: 1.5rem;6  –space-5: 2rem;7}

Use it like this:

1.card {2  padding: var(–space-4);3  margin-bottom: var(–space-5);4}

This keeps spacing consistent across the site.

Building a Simple Type Scale

A type scale helps keep text sizes consistent.

Example:

1:root {2  –text-sm: 0.875rem;3  –text-base: 1rem;4  –text-lg: 1.25rem;5  –text-xl: 1.5rem;6  –text-2xl: 2rem;7}

Use it like this:

1body {2  font-size: var(–text-base);3}4 5h1 {6  font-size: var(–text-2xl);7}8 9.small-text {10  font-size: var(–text-sm);11}

Using rem with custom properties makes the system predictable.

Practical Example: Responsive Container

HTML:

1<div class=”container”>2  <h1>CSS Units</h1>3  <p>Units help control size, spacing, and layout.</p>4</div>

CSS:

1.container {2  width: min(100% – 2rem, 70rem);3  margin-inline: auto;4}

This means:

1The container is almost full width on small screens.2It has 1rem space on each side.3It does not grow wider than 70rem.4It is centred with auto margins.

This is a clean responsive pattern.

Practical Example: Responsive Card

HTML:

1<article class=”card”>2  <h2>Card Title</h2>3  <p>This card uses flexible CSS units.</p>4</article>

CSS:

1.card {2  width: min(100%, 36rem);3  padding: 1.5rem;4  border: 1px solid #dddddd;5  border-radius: 0.75rem;6}7 8.card h2 {9  font-size: 1.5rem;10  margin-bottom: 0.5em;11}12 13.card p {14  line-height: 1.6;15}

This uses:

1min() for responsive width2rem for consistent spacing3px for border thickness4em for heading margin based on heading size5unitless line-height for readable text

Different units are used for different jobs.

Practical Example: Fluid Hero Section

HTML:

1<section class=”hero”>2  <h1>Learn CSS Units</h1>3  <p>Build layouts that adapt to different screens.</p>4</section>

CSS:

1.hero {2  min-height: 100dvh;3  display: grid;4  place-items: center;5  padding: 2rem;6}7 8.hero h1 {9  font-size: clamp(2.5rem, 8vw, 6rem);10}11 12.hero p {13  font-size: clamp(1rem, 2vw, 1.5rem);14  max-width: 60ch;15}

This hero adapts to the viewport.

The heading and paragraph scale within limits.

The paragraph line length stays readable.

Practical Example: Button That Scales with Text

HTML:

1<button class=”button”>Save</button>2<button class=”button button-large”>Continue</button>

CSS:

1.button {2  font-size: 1rem;3  padding: 0.75em 1em;4  border-radius: 0.5em;5}6 7.button-large {8  font-size: 1.25rem;9}

The large button gets larger padding automatically because the padding uses em.

This keeps the button proportions consistent.

Practical Example: Grid with fr

HTML:

1<div class=”layout”>2  <aside>Sidebar</aside>3  <main>Main content</main>4</div>

CSS:

1.layout {2  display: grid;3  grid-template-columns: 1fr 3fr;4  gap: 1rem;5}

The main content column is three times as wide as the sidebar column.

This is simpler than calculating percentages manually.

Practical Example: Readable Article Text

HTML:

1<article class=”post”>2  <h1>CSS Units Explained</h1>3  <p>CSS units make web layouts flexible and readable.</p>4</article>

CSS:

1.post {2  max-width: 65ch;3  margin-inline: auto;4  padding: 2rem;5}6 7.post h1 {8  font-size: clamp(2rem, 6vw, 4rem);9}10 11.post p {12  font-size: 1rem;13  line-height: 1.7;14}

This uses:

1ch for readable line length2rem for spacing3clamp() and vw for fluid heading size4unitless line-height for readable paragraphs

Unitless Values

Some CSS properties can use unitless numbers.

Example:

1p {2  line-height: 1.6;3}

This is often better than:

1p {2  line-height: 24px;3}

A unitless line height scales with the font size.

Example:

1body {2  line-height: 1.6;3}

This lets different text sizes use proportional line height.

Other properties also use unitless numbers, such as:

1opacity: 0.5;2z-index: 10;3font-weight: 700;4flex-grow: 1;

Do not add units where the property expects a unitless value.

Zero Does Not Need a Unit

This is valid:

1.card {2  margin: 0;3  padding: 0;4}

You do not need:

1.card {2  margin: 0px;3  padding: 0rem;4}

Zero is zero in any length unit.

Use plain 0 for cleaner CSS.

Full Example: Combining Units

HTML:

1<section class=”feature”>2  <div class=”feature-content”>3    <h2>Flexible Units</h2>4    <p>Use the right unit for the job.</p>5    <a href=”/learn”>Learn more</a>6  </div>7</section>

CSS:

1.feature {2  min-height: 100dvh;3  padding: clamp(2rem, 6vw, 5rem);4  display: grid;5  place-items: center;6}7 8.feature-content {9  width: min(100%, 42rem);10  padding: 2rem;11  border: 1px solid #dddddd;12  border-radius: 1rem;13}14 15.feature h2 {16  font-size: clamp(2rem, 6vw, 4rem);17  margin: 0 0 0.5em;18}19 20.feature p {21  max-width: 60ch;22  line-height: 1.6;23}24 25.feature a {26  display: inline-block;27  margin-top: 1rem;28  padding: 0.75em 1em;29}

This example uses:

1dvh for viewport height2clamp() for responsive spacing and text3vw inside clamp() for fluid scaling4min() for responsive width5rem for stable spacing6px for border thickness7em for text-relative spacing8ch for readable line length9unitless line-height

Good CSS often combines units instead of using one unit everywhere.

Full Example: Dashboard Layout

HTML:

1<div class=”dashboard”>2  <aside class=”sidebar”>Sidebar</aside>3  <main class=”main”>Main content</main>4</div>

CSS:

1.dashboard {2  min-height: 100dvh;3  display: grid;4  grid-template-columns: 16rem 1fr;5}6 7.sidebar {8  padding: 1rem;9}10 11.main {12  padding: clamp(1rem, 4vw, 3rem);13}

This uses:

1dvh for full viewport height2rem for sidebar width and padding3fr for flexible main content4clamp() for responsive main padding5vw for viewport-based scaling inside clamp()

The sidebar has a stable width.

The main area fills the remaining space.

The main padding adapts to screen size.

Full Example: Responsive Image

HTML:

1<img class=”image” src=”photo.jpg” alt=”Example photo”>

CSS:

1.image {2  width: 100%;3  max-width: 40rem;4  height: auto;5}

The image can shrink to fit its parent.

It will not grow wider than 40rem.

The height stays proportional.

This is a common responsive image pattern.

Full Example: Progress Bar

HTML:

1<div class=”progress”>2  <div class=”progress-value”></div>3</div>

CSS:

1.progress {2  width: 100%;3  height: 0.75rem;4  background-color: #eeeeee;5  border-radius: 999px;6}7 8.progress-value {9  width: 70%;10  height: 100%;11  background-color: #2563eb;12  border-radius: inherit;13}

The outer bar fills its parent.

The inner bar is 70% of the outer bar.

This is a good use of percentages.

Best Practices for CSS Units

Use rem for consistent spacing and font sizes.

Use em when a component part should scale with its text.

Use % when a size should depend on the parent.

Use px for small fixed details such as borders.

Use vw and vh for viewport-based layouts, but use them carefully.

Use dvh instead of vh for full-height mobile layouts when appropriate.

Use ch for readable text widths.

Use fr for CSS Grid tracks.

Use clamp() for fluid sizes with minimum and maximum limits.

Use unitless line-height.

Use 0 without a unit.

Avoid fixed pixel widths for large layout containers unless you also provide responsive limits.

Avoid using one unit for everything.

Choose the unit based on the behaviour you want.

Quick Reference

1px2Fixed CSS pixels. Useful for borders, icons, and precise details.3 4%5Relative to another size, often the parent or containing block.6 7em8Relative to font size. For font-size, it uses the parent font size. For many other properties, it uses the element’s own font size.9 10rem11Relative to the root font size. Useful for consistent spacing and typography.12 13vw141% of the viewport width.15 16vh171% of the viewport height.18 19dvh201% of the dynamic viewport height. Useful for mobile full-height layouts.21 22vmin231% of the smaller viewport dimension.24 25vmax261% of the larger viewport dimension.27 28ch29Width of the 0 character in the current font. Useful for readable text width.30 31lh32Computed line height of the element.33 34rlh35Computed line height of the root element.36 37fr38Fraction of available space in CSS Grid.39 40s41Seconds, used for animation and transition timing.42 43ms44Milliseconds, used for animation and transition timing.45 46deg47Degrees, used for rotation and angles.

Quick Summary

CSS units tell the browser how large something should be.

Pixels are simple and precise, but they are not always flexible.

Percentages are relative to another size, often the parent.

em scales with font size and is useful for component proportions.

rem scales with the root font size and is useful for consistent spacing and typography.

vw and vh scale with the viewport.

Modern viewport units such as dvh, svh, and lvh help with mobile viewport height issues.

ch is useful for readable text widths.

fr is useful for CSS Grid layouts.

Functions like calc(), min(), max(), and clamp() make units more powerful.

The best unit depends on what the size should respond to.

Use fixed units for fixed details.

Use relative units for flexible layouts.

Use the right unit for the job instead of using the same unit everywhere.