Absolute vs Relative Units CSS Guide

Introduction

CSS units control size.

You use them for text, spacing, width, height, borders, layout, and responsive design.

Example:

1.card {2  width: 300px;3  padding: 2rem;4}

This rule uses two different units:

1300px22rem

The first value uses px.

The second value uses rem.

These units behave differently.

Some CSS units create fixed sizes.

Some CSS units create flexible sizes.

This is the main difference between absolute and relative units.

Absolute units are more fixed.

Relative units depend on something else, such as the parent size, the root font size, the current font size, or the viewport size.

Understanding this difference helps you choose better units for layouts that work across different screens, devices, and user settings.

What Are Absolute Units?

Absolute units describe a size that does not depend on another CSS value in the same way relative units do.

The most common absolute unit in web design is:

1px

Example:

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

This tells the browser to make the box 300px wide.

The size is direct and predictable.

Other absolute CSS units exist too:

1cm2mm3in4pt5pc6px

But for normal screen-based web design, you will mostly use px.

Units like cm, mm, in, pt, and pc are more common in print-related CSS than everyday web layouts.

What Are Relative Units?

Relative units are based on another measurement.

Examples include:

1%2em3rem4vw5vh6vmin7vmax8ch9lh10fr

Each relative unit depends on a different reference.

For example:

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

The 50% value depends on the size of the parent or containing block.

Another example:

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

The 2rem value depends on the root font size.

Another example:

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

The 100vh value depends on the viewport height.

Relative units are often useful for flexible and responsive designs.

Fixed Sizing vs Flexible Sizing

The core difference is:

1Absolute units are usually better for fixed sizing.2Relative units are usually better for flexible sizing.

Fixed sizing means the size stays more controlled and direct.

Example:

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

Flexible sizing means the size adapts to something else.

Example:

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

The container changes size based on the available space, but it does not grow beyond a maximum width.

This is usually better for responsive layouts.

The px Unit

The px unit means CSS pixel.

Example:

1.button {2  border-radius: 8px;3}

The browser applies an 8px border radius.

Pixels are straightforward.

They are useful when you want precise control.

Example:

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

This is a good use of pixels.

Small visual details often work well with fixed pixel values.

When Pixels Are Useful

Pixels are commonly useful for:

1borders2icons3thin lines4box shadows5small fixed details6border radius7precise spacing in small UI details

Example:

1.avatar {2  width: 48px;3  height: 48px;4  border-radius: 50%;5}

This gives the avatar a predictable size.

Another example:

1.card {2  border: 1px solid #cccccc;3}

A 1px border is simple and clear.

When Pixels Can Cause Problems

Pixels can become a problem when they are used for large layout sizes without flexibility.

Example:

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

This might look fine on a desktop screen.

But on a phone screen, 700px may be too wide.

The card may overflow horizontally.

A more flexible version is:

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

Now the card can shrink on small screens.

It can still stop at 700px on larger screens.

This combines flexible and fixed sizing.

Fixed Width Example

HTML:

1<div class=”card”>2  This is a card.3</div>

CSS:

1.card {2  width: 500px;3  padding: 20px;4}

The card is always 500px wide.

On a wide screen, that may be fine.

On a narrow screen, it may overflow.

This is the risk of fixed width.

Fixed sizes are predictable, but they are not always adaptable.

Flexible Width Example

HTML:

1<div class=”card”>2  This is a card.3</div>

CSS:

1.card {2  width: 100%;3  max-width: 500px;4  padding: 1rem;5}

This card is more flexible.

It can fill the available width.

But it will not become wider than 500px.

This is a common responsive pattern:

1width: 100%;2max-width: fixed-size;

It gives you flexibility and control at the same time.

The % Unit

The percentage unit is relative to another size.

For width, it is usually relative to the containing block.

Example:

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

The .box becomes 400px wide.

Why?

150% of 800px = 400px

Percentages are useful when an element should respond to its parent’s size.

Percentage Width Example

HTML:

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

CSS:

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

The sidebar uses 30% of the wrapper.

The content uses 70%.

This creates a flexible layout because the column widths adapt when the wrapper changes size.

Percentage Height Can Be Tricky

Percentage heights can be less intuitive than percentage widths.

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 set height */3}4 5.child {6  height: 50%;7}

If the parent does not have a definite height, the browser may not know what 50% should be based on.

For full-height sections, viewport units are often clearer:

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

The em Unit

The em unit is relative to font size.

For many properties:

11em = the current element’s font size

Example:

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

The padding becomes 16px.

If the button font size changes to 20px, the padding becomes 20px.

This makes em useful for component sizing.

em for Scalable Components

HTML:

1<button class=”button”>Save</button>2<button class=”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 larger text.

Its padding and border radius also scale because they use em.

This keeps the button proportions consistent.

This is a good use of relative units.

em Can Compound

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

Example:

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

The child font size becomes 30px.

Why?

11.5 × 20px = 30px

This can be useful.

But nested em values can compound.

Example:

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

If lists are nested inside lists, each nested list can become larger than the last.

That may be intended, but it can also be accidental.

The rem Unit

The rem unit is relative to the root font size.

The root element is usually:

1<html>

If the root font size is 16px, then:

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

Example:

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

If the root font size is 16px, the padding is 32px.

Unlike em, rem does not depend on the local parent’s font size.

This makes it more predictable for site-wide spacing.

rem for Consistent Sizing

The rem unit is commonly used for:

1font sizes2padding3margin4gap5container widths6section spacing

Example:

1body {2  font-size: 1rem;3}4 5.card {6  padding: 1.5rem;7  margin-bottom: 2rem;8}9 10.grid {11  gap: 1rem;12}

These sizes all relate to the root font size.

That makes them consistent across the page.

em vs rem

The difference is:

1em  = based on local font size2rem = based on 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 becomes:

12 × 20px = 40px

The .child-rem font size becomes:

12 × 16px = 32px

Use em when the size should follow local text size.

Use rem when the size should follow the root scale.

The vw Unit

The vw unit is relative to viewport width.

The viewport is the visible browser area.

11vw = 1% of the viewport width2100vw = full viewport width

Example:

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

This makes the hero as wide as the viewport.

Another example:

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

The title size changes as the viewport width changes.

This can create fluid typography.

The vh Unit

The vh unit is relative to viewport height.

11vh = 1% of the viewport height2100vh = full 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 sections.

However, 100vh can be tricky on mobile browsers because browser interface bars can change the visible height.

Modern CSS includes newer viewport units such as:

1svh2lvh3dvh

For mobile full-height layouts, you may use:

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

Viewport Units Are Flexible

Viewport units are useful when a size should respond to the browser window.

Example:

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

If the viewport gets wider, the title gets larger.

If the viewport gets narrower, the title gets smaller.

But pure viewport sizing can go too far.

The title may become too small or too large.

A better approach is often:

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

This gives the title a minimum size, a flexible preferred size, and a maximum size.

The ch Unit

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

It is useful for text line length.

Example:

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

This means the article is about 65 characters wide.

That is useful because readable text is often better measured by characters than by pixels.

Compare:

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

with:

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

The ch version is more connected to the actual text.

The fr Unit

The fr unit is used in CSS Grid.

It means a fraction of available space.

Example:

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

This creates two columns.

The second column gets three times as much available space as the first.

The fr unit is relative because it depends on available space inside the grid container.

It is very useful for flexible grid layouts.

Absolute Units in Print

CSS includes units such as:

1in2cm3mm4pt5pc

Examples:

1@media print {2  body {3    margin: 2cm;4  }5}

These units can be useful when designing for print.

For screen layouts, they are usually less common.

Most web interfaces use:

1px2rem3em4%5vw6vh7fr

That is where beginners should focus first.

Fixed Sizing Example

A fixed layout might look like this:

1.container {2  width: 960px;3}4 5.card {6  width: 300px;7  padding: 20px;8}

This is predictable.

The container is always 960px.

The card is always 300px.

The padding is always 20px.

But the layout may not adapt well to smaller screens.

On a phone, 960px is likely too wide.

Fixed sizing gives control, but it can reduce flexibility.

Flexible Sizing Example

A flexible layout might look like this:

1.container {2  width: min(100% – 2rem, 70rem);3  margin-inline: auto;4}5 6.card {7  width: 100%;8  padding: 1.5rem;9}

This adapts better.

The container uses the available width.

It leaves space at the sides.

It does not grow wider than 70rem.

The card fills the container.

This is a more responsive approach.

Combining Fixed and Flexible Units

Good CSS often combines fixed and flexible units.

Example:

1.card {2  width: 100%;3  max-width: 600px;4  padding: 1.5rem;5  border: 1px solid #dddddd;6}

This uses:

1100% for flexible width2600px for maximum fixed width31.5rem for scalable spacing41px for a precise border

This is often better than using only one type of unit.

You do not need to choose absolute or relative units for everything.

You choose the unit that fits each job.

Absolute Units Are Not Bad

Absolute units are not wrong.

Pixels are useful.

Example:

1.card {2  border: 1px solid #dddddd;3}

A 1px border is clear.

Another example:

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

A fixed icon size may be exactly what you need.

The problem is not using pixels.

The problem is using fixed values where flexibility is needed.

Relative Units Are Not Always Better

Relative units are flexible, but they can also be confusing.

Example:

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

This depends on the parent.

If the parent is unexpectedly narrow, the child will be narrow too.

Another example:

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

This may become too large on wide screens.

Relative units need context.

They are powerful, but they should be used deliberately.

Choosing Between Fixed and Flexible Units

Ask what the size should respond to.

If the size should stay precise, use a fixed unit.

Example:

1border: 1px solid #dddddd;

If the size should respond to the parent, use %.

Example:

1width: 50%;

If the size should respond to the root font size, use rem.

Example:

1padding: 2rem;

If the size should respond to the current element’s text size, use em.

Example:

1padding: 0.75em 1em;

If the size should respond to the viewport, use vw, vh, or related viewport units.

Example:

1min-height: 100dvh;

Responsive Design Usually Needs Relative Units

Responsive design means the layout adapts to different screen sizes.

Relative units are useful for this.

Example:

1.container {2  width: min(100% – 2rem, 70rem);3}

This works on small and large screens.

Another example:

1.grid {2  display: grid;3  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));4  gap: 1rem;5}

This grid adapts to available space.

The rem and fr units help the layout stay flexible.

min(), max(), and clamp()

CSS functions help combine fixed and flexible sizing.

The min() function chooses the smaller value:

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

The max() function chooses the larger value:

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

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

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

These functions are very useful for balancing fixed and flexible sizing.

clamp() for Fluid Text

Example:

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

This means:

1The font size will not go below 2rem.2It will try to scale with 8vw.3It will not go above 5rem.

This is better than:

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

because pure viewport text can become too small or too large.

clamp() adds control.

min() for Flexible Containers

Example:

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

This means:

1Use the available width minus 2rem.2But do not exceed 70rem.3Center the container.

This is a useful responsive container pattern.

It combines a flexible width with a maximum readable size.

Fixed Layout vs Responsive Layout

A fixed layout might use:

1.page {2  width: 1200px;3}

A responsive layout might use:

1.page {2  width: min(100% – 2rem, 75rem);3}

The fixed layout is always 1200px.

The responsive layout adapts to the viewport and has a maximum width.

For modern websites, responsive layouts are usually safer.

Fixed layouts can still be useful in controlled contexts, but they are less flexible.

Absolute Units and Accessibility

Using fixed pixel values for everything can reduce flexibility for users.

For example:

1body {2  font-size: 12px;3}

This may be too small for many users.

A better default is often:

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

This respects the root font size.

If the user changes their browser font size, rem-based sizing can respond more naturally.

Use fixed text sizes carefully.

Relative Units and Accessibility

Relative units can support accessibility when used well.

Example:

1body {2  font-size: 1rem;3  line-height: 1.6;4}

This creates readable text that can respond to user settings.

Another example:

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

If the text size increases, the button padding scales too.

This helps the component remain usable.

Unitless Line Height

Line height is often best written without a unit.

Example:

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

This means the line height is based on the element’s font size.

If the font size changes, the line height changes proportionally.

This is usually better than:

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

A fixed line height may not work well with different font sizes.

Common Mistake: Using Fixed Width Without a Maximum Strategy

This can cause overflow:

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

Better:

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

Or:

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

These versions allow the card to shrink on small screens.

Common Mistake: Using 100vw for Normal Width

This can cause horizontal scrolling:

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

Often, this is enough:

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

The difference is important.

100% usually means the width of the parent.

100vw means the width of the viewport.

On some pages, 100vw can include the scrollbar width and create overflow.

Common Mistake: Confusing % and vw

These are different:

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

and:

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

50% depends on the parent or containing block.

50vw depends on the viewport width.

Example:

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

The box is 400px.

But:

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

If the viewport is 1200px, the box is 600px.

The parent may not matter.

Common Mistake: Confusing em and %

Both are relative, but they are not the same.

Example:

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

This means the child font size is 120% of the parent font size.

This is similar to:

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

But for other properties, percentages and em may use different references.

Example:

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

Percentage padding often depends on the containing block width.

But:

1.box {2  padding: 1em;3}

em padding depends on the element’s font size.

Different relative units respond to different things.

Common Mistake: Overusing em for Font Sizes

This can compound:

1.menu {2  font-size: 1.1em;3}

If menus are nested, each nested menu may become larger.

If you want consistent sizing, use rem:

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

Use em when compounding is acceptable or useful.

Use rem when you want a consistent scale.

Common Mistake: Pure Viewport Font Sizes

This can be too extreme:

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

Better:

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

The clamp() version keeps the size within a useful range.

It is flexible without becoming uncontrolled.

Practical Example: Fixed Card

HTML:

1<article class=”card”>2  <h2>Fixed Card</h2>3  <p>This card uses fixed sizing.</p>4</article>

CSS:

1.card {2  width: 360px;3  padding: 24px;4  border: 1px solid #dddddd;5}

This card is predictable.

But it may not adapt well to narrow screens.

It is best used when you know the available space.

Practical Example: Flexible Card

HTML:

1<article class=”card”>2  <h2>Flexible Card</h2>3  <p>This card adapts to the available space.</p>4</article>

CSS:

1.card {2  width: min(100%, 36rem);3  padding: 1.5rem;4  border: 1px solid #dddddd;5}

This card can shrink on small screens.

It does not grow beyond 36rem.

The spacing uses rem, which connects to the root font size.

This is usually more suitable for responsive layouts.

Practical Example: Fixed Button

HTML:

1<button class=”button”>2  Save3</button>

CSS:

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

This button has fixed text size and fixed padding.

It is simple.

But if you later create a larger button, you need to manually adjust the padding too.

Practical Example: Flexible Button

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}5 6.button-large {7  font-size: 1.25rem;8}

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

This makes the component more flexible.

Practical Example: Fixed Text Width

CSS:

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

This gives the article a fixed maximum width.

That may work.

But the readable line length depends on font size.

If the font changes, 700px may not represent the same number of characters.

Practical Example: Flexible Text Width

CSS:

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

This uses character-based width.

It keeps the article line length closer to a readable text measure.

This is often useful for blog posts, documentation, and long-form text.

Practical Example: Responsive Section

HTML:

1<section class=”hero”>2  <h1>Flexible CSS Units</h1>3  <p>Choose units based on how the design should respond.</p>4</section>

CSS:

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

This section uses relative and flexible sizing.

The height responds to the viewport.

The padding scales with viewport width but stays within limits.

The heading scales within limits.

The paragraph width is based on readable line length.

Practical Example: Responsive Grid

HTML:

1<div class=”grid”>2  <article>One</article>3  <article>Two</article>4  <article>Three</article>5</div>

CSS:

1.grid {2  display: grid;3  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));4  gap: 1rem;5}

This grid adapts automatically.

Each column is at least 16rem.

If there is more space, columns share it using 1fr.

This is a good example of flexible sizing.

Practical Example: Mixed Units

CSS:

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

This uses:

1min() for flexible maximum width2rem for consistent spacing3px for precise border and radius4clamp() with vw for flexible heading size5em for heading-related spacing6ch for readable paragraph width7unitless line-height

This is often how good CSS works.

It combines units based on purpose.

Absolute vs Relative Unit Examples

Fixed size:

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

Parent-relative size:

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

Root font-relative size:

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

Current font-relative size:

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

Viewport-relative size:

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

Grid-relative size:

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

Each unit answers a different question.

Which Unit Should You Use?

Use this guide:

1Use px when the value should be precise and fixed.2 3Use % when the value should depend on the parent or containing block.4 5Use rem when the value should follow the root font size.6 7Use em when the value should scale with the current element’s text.8 9Use vw or vh when the value should depend on the viewport.10 11Use dvh when you need viewport height that adapts better on mobile.12 13Use ch when width should follow readable text length.14 15Use fr when dividing available space in CSS Grid.

There is no single best unit.

There is only the best unit for the behaviour you need.

Best Practices

Use fixed units for small precise details.

Use relative units for responsive layouts.

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

Use width: 100% with max-width for flexible containers.

Use rem for consistent spacing and typography.

Use em for component spacing that should scale with text.

Use % when a size should depend on the parent.

Use viewport units carefully, especially 100vh on mobile.

Use clamp() to control flexible sizes.

Use unitless line-height.

Use 0 without a unit.

Combine units instead of forcing one unit everywhere.

Quick Reference

1Absolute unit:2 3px4A fixed CSS pixel. Useful for precise details such as borders, shadows, icons, and small fixed sizes.5 6Relative units:7 8%9Relative to another size, often the parent or containing block.10 11em12Relative to font size. Useful for component parts that should scale with text.13 14rem15Relative to the root font size. Useful for consistent spacing and typography.16 17vw18Relative to viewport width.19 20vh21Relative to viewport height.22 23dvh24Relative to dynamic viewport height. Useful for mobile full-height layouts.25 26ch27Relative to the width of the 0 character. Useful for readable text widths.28 29fr30A fraction of available space in CSS Grid.

Quick Summary

Absolute units create more fixed sizing.

Relative units create more flexible sizing.

Pixels are the most common absolute unit for screen design.

Pixels are useful for borders, icons, shadows, and precise details.

Relative units depend on another value, such as the parent size, root font size, current font size, viewport size, or available grid space.

Percentages depend on the parent or containing block.

em depends on font size and is useful for scalable components.

rem depends on the root font size and is useful for consistent spacing.

vw and vh depend on the viewport.

ch is useful for readable text widths.

fr is useful in CSS Grid.

Fixed sizing gives control.

Flexible sizing gives adaptability.

Most good CSS uses both.

Choose the unit based on what the size should respond to.