CSS Units Explained: px, em, rem, %, vh, vw & More (With Examples) !

CSS Units Explained: px, em, rem, %, vh, vw & More (With Examples) !

Not sure which CSS units to use for sizing elements?

This guide breaks down various CSS units like pixels (px), em, rem, percentages (%), viewport height (vh), and viewport width (vw). Understand how each unit works and when to use them for responsive and scalable designs.

Introduction

Understanding CSS units is essential to building responsive, clean, and flexible web designs. This guide will walk you through 'all common CSS units', explain what each one means, how it calculates value, and give you simple examples for every unit. Let's get started!

In this Tutorial, we are going to cover the following CSS 'Units':

1. px (Pixels)
2. % (Percentage)
3. em
4. rem
5. vh (Viewport Height)
6. vw (Viewport Width)
7. vmin
8. vmax
9. ch (Character Width)
10. ex

1. 'px (Pixels)'

• What it is A fixed unit. 1px = 1 physical pixel on the screen.
• Use case Best for precise spacing or borders that don't need to scale.

Example

This means the font size is exactly 24 pixels, no matter the screen size.

2. '% (Percentage)'

• What it is Relative to the parent element's size.
• Use case Useful for layouts and widths that need to adjust based on container size.

Example

This means the `<div>` will take 50% of the width of its parent.

3. 'em'

• What it is Relative to the font size of the element's parent.
• 1em = Parent's font size
• Use case Great for scaling fonts and padding with respect to parent elements.

Example

If the parent's font size is 16px, then `1.5em` = 24px.

4. 'rem (Root em)'

• What it is Relative to the root element (`html`) font size.
• 1rem = Root font size (usually 16px)
• Use case Better than `em` for consistent sizing across elements.

Example

If root font-size is 16px, this means 1.25rem = 20px.

5. 'vh (Viewport Height)'

• What it is 1vh = 1% of the viewport height.
• Use case Useful for full-screen sections or banners.

Example

This means the section takes 100% of the browser height.

6. 'vw (Viewport Width)'

• What it is 1vw = 1% of the viewport width.
• Use case Great for responsive widths and typography.

Example

Font size will change as the browser width changes.

7. 'vmin / vmax'

• What it is
• * `vmin` = smaller of `vh` or `vw`
• * `vmax` = larger of `vh` or `vw`
• Use case Great for scaling UI based on the smallest or largest screen dimension.

Example

The text size adapts to the smaller of screen width or height.

8. 'ch (Character Width)'

• What it is 1ch = width of the "0" character in the element's font.
• Use case Helpful for setting widths in terms of characters.

Example

The input field fits about 20 characters.

9. 'ex'

• What it is Relative to the x-height of the current font (usually the height of the lowercase "x").
• Use case Rarely used, useful in fine-tuning typography.

Example

Summary Table for Quick Reference

Unit	Relative to	Typical Use
px	Fixed	Exact sizing
%	Parent size	Responsive layouts
em	Parent font	Nested scaling
rem	Root font	Consistent scaling
vh	Viewport H	Full-height elements
vw	Viewport W	Responsive font/layouts
vmin	Smaller of vh/vw	Responsive UIs
vmax	Larger of vh/vw	Responsive UIs
ch	Character width	Form inputs, readable widths
ex	Font x-height	Typography fine-tuning

Suggested Posts:

• HTML Heading Tag Tutorial with Examples | H1 to H6 Tags Explained
• HTML Paragraph Tag Tutorial with Examples | HTML '<p>' Tag Explained
• HTML div and span Tag Explained with Examples - Complete Guide
• HTML input Tag - Types, Attributes, Syntax, and Examples
• HTML Semantic Elements - Complete Guide with Examples & Syntax

Related Topics:

• CSS Width and Height Property Tutorial with Examples for Beginners
• CSS Flexbox Tutorial: Master CSS Display Flex Property with Examples
• CSS Grid Layout Tutorial for Beginners | Complete Guide with Examples
• CSS Media Query Tutorial for Responsive Design with Examples

Frequently Asked Questions (FAQs)

What is the best CSS unit to use?

There's no one best unit. It depends on what you're building. Use `px` for fixed sizes, `rem` or `em` for scalable text, and `%`, `vw`, or `vh` for responsive designs.

What is the difference between px, em, and rem in CSS?

• `px` is fixed and doesn't change.
• `em` depends on the size of the parent element.
• `rem` is based on the root (html) font size, so it's more consistent across elements.

When should I use rem instead of px?

Use `rem` when you want your design to scale better on different screen sizes. It also helps with accessibility, like increasing text size in browsers.

What does 1rem mean in CSS?

It means “1 root em.” If your root (html) font size is 16px, then 1rem = 16px.

What is 100vh in CSS?

It means 100% of the viewport height. So, if your screen height is 800px, 100vh = 800px.

Is % the same as vw or vh?

No. `%` is based on the parent element's size. `vw` and `vh` are based on the browser window's width and height.

Can I mix different CSS units together?

Yes! You can mix units like `calc(100% - 20px)` to get flexible layouts. Just be careful so it doesn't get confusing.

Which CSS units are best for responsive design?

Use `%`, `vw`, `vh`, and `rem` to make layouts that adjust to different screen sizes and devices.

What is the default font size for rem calculation?

The default root font size is usually 16px*in most browsers. So, 1rem = 16px by default unless you change it.

What is the difference between vmin and vmax?

• `vmin` is based on the smaller value of the viewport's height or width.
• `vmax` is based on the larger one.

They help make things flexible based on screen size.