Hello! Welcome to the next lesson in our course.
In the previous lesson, we explored the CSS position property, learning how to take elements out of the normal document flow to create layouts with overlays, fixed headers, and other layered components. In those examples, we often used pixels (px) to define offsets and sizes. Pixels are absolute units—they represent a fixed size.
Today, we'll shift our focus to relative units. As a designer, you know that a design that looks great on a 27-inch monitor might feel broken on a mobile phone. Relative units are the cornerstone of creating fluid, responsive, and accessible designs that adapt gracefully to different screen sizes and user preferences.
This lesson directly addresses the learning outcome: Use relative units including em, rem, percentages, and viewport units for responsive sizing. We will explore what each of these units is relative to and establish clear guidelines for when to use each one.
1. Absolute vs. Relative Units: The Core Concept
First, let's formally distinguish between the two main categories of CSS length units.
- Absolute units are fixed and do not change in relation to anything else. The most common absolute unit is the pixel (
px). These are useful for elements you want to have a specific, unchanging size, like a thin border (border: 1px solid black). - Relative units are flexible because their actual value is calculated based on some other value, such as the parent element's size or the browser window's size.
This distinction is fundamental to responsive design. Let's get a more detailed definition from the Mozilla Developer Network (MDN), an essential resource for web developers.
This MDN article provides a clear definition of absolute and relative units. Understanding this core difference is the first step.
Read the section titled Lengths, including the subsections Absolute length units and Relative length units. Focus on the core distinction: absolute units are fixed, while relative units are calculated based on something else.
2. Font-Relative Units: rem and em
Two of the most powerful and commonly used relative units are rem and em. Both are related to font size, but their point of reference is different.
rem (Root Em)
The rem unit is relative to the font size of the root element, which is the <html> tag. By default, most browsers set the root font size to 16px, so 1rem equals 16px, 2rem equals 32px, and so on.
The primary benefit of using rem for font sizes is accessibility. Users can adjust their browser's default font size for better readability. If you size your text in rem, your entire typographic scale will adjust proportionally. If you use px, you override the user's preference, creating a less accessible experience.
em
The em unit is relative to the font size of its direct parent element. If a <div> has a font-size of 20px, then for a child element inside it, 1em will equal 20px.
This is useful for creating components where the spacing inside the component should scale along with its text. A classic example is the padding on a button. If you make the button's text larger, you'd want the padding around it to grow proportionally.
Let's watch a video that explains these use cases.
Are you using the right CSS units?
Kevin Powell provides excellent, practical rules of thumb for when to use rem and em.
First, watch from 00:27 to 01:49 to understand rem and its importance for accessibility. Then, watch from 04:03 to 04:59 to see how em is used for scalable component padding and how it differs from rem for margins.
The rem vs. em Compounding Problem
Because em is relative to its parent, you can run into issues with deeply nested elements. If you set a font size of 1.2em on nested list items, each level of nesting will become progressively larger, which is usually not what you want. rem units avoid this by always referring back to the single root font size.
This video provides a crystal-clear visual demonstration of this exact issue.
The difference between rem (root-relative) and em (parent-relative) becomes most obvious with nested elements. This video from Web Dev Simplified illustrates the concept perfectly.
Watch from 03:53 to 07:23. Focus on the visual example where the nested em text grows larger, while the rem text stays consistent. This is the key difference to remember.
To solidify this concept, let's see it one more time in a reading format with an interactive example.
The MDN documentation has a classic nested list example that reinforces what you just saw in the video. Reading and interacting with this will help the concept stick.
Read the subsection ems and rems. In the interactive code example, try changing the html font-size (e.g., to 20px) and observe how all the text scales, but the em-based list items still compound.
3. Sizing-Relative Units: Percentages (%) and Viewport Units (vw, vh)
Next, let's look at units used for sizing layout elements like containers, columns, and sections.
Percentages (%)
The % unit is relative to the size of the parent element. If a container is 800px wide, a child element with width: 50% will be 400px wide. This is the most common way to create fluid columns and elements that take up a proportional amount of space within a containing block.
Viewport Units (vw and vh)
Viewport units are relative to the dimensions of the browser viewport (the visible area of the web page).
1vw= 1% of the viewport's width.1vh= 1% of the viewport's height.
These are incredibly useful for sizing elements in relation to the screen itself, regardless of where they are nested. A common use case is creating a "hero" section that takes up the full height of the screen: height: 100vh;.
% vs. vw: A Crucial Distinction
A width: 50% element will be half the width of its parent. A width: 50vw element will be half the width of the browser window. If the parent is smaller than the browser window, the 50vw element will overflow its parent.
This video demonstrates this critical difference.
Understanding when to use percentages versus viewport units is key to layout design. This segment clearly illustrates the difference in their reference points.
Watch from 00:31 to 03:53. Pay close attention to the example where a box sized with vw overflows its parent container, while the box sized with % fits perfectly inside. This demonstrates their fundamental difference.
4. Practical Guidelines: When to Use Which Unit
You now have four new types of relative units in your toolkit. Here is a practical guide, framed as if you were defining standards for a design system.
| Property | Recommended Unit | Why? |
|---|---|---|
| Font Size | rem | Ensures all typography scales consistently and respects the user's browser font size settings for accessibility. |
| Padding/Margin (Global) | rem | For spacing between major layout elements and components. This creates a consistent, scalable rhythm across the entire page. |
| Padding/Margin (Internal) | em | For spacing inside a component (e.g., a button's padding). This ensures the spacing scales with the component's own font size. |
| Width/Height (Layout) | % | For elements that should be a fraction of their parent container, like columns in a grid or the width of a form input. |
| Width/Height (Viewport) | vw, vh | For elements that need to be sized relative to the screen, like a full-height hero section (100vh) or a modal that takes up 80vw. |
| Borders, small fixed values | px | For things that should not scale, like a 1px border or a 2px box-shadow offset. Using px here is perfectly acceptable. |
This short video clip provides a final summary of these rules of thumb.
Are you using the right CSS units?
To wrap up, Kevin Powell's video concludes with a great summary of which units to reach for in different situations.
Watch the summary from 05:17 to 06:05. This provides a practical, rule-of-thumb approach to choosing your units.
Conclusion
Great job! Mastering relative units is a huge step toward thinking like a front-end developer and bridging the gap between static design mockups and dynamic, responsive websites. By moving away from fixed pixel values, you empower your designs to be more flexible, accessible, and adaptable to the countless devices your users will have.
Key Takeaways:
rem(Root Em): Relative to the root (<html>) font size. Best for typography and global spacing to ensure accessibility and consistent scaling.em: Relative to the parent element's font size. Ideal for component-internal spacing (like padding) that should scale with the component's text.%(Percentage): Relative to the parent element's dimensions. The standard choice for creating fluid layouts and columns within a container.vw/vh(Viewport Units): Relative to the viewport's width and height. Perfect for sizing elements in direct relation to the screen itself.
In our next lesson, we'll learn about media queries. Now that you can create flexible layouts with Flexbox/Grid, position elements precisely, and size them with responsive units, media queries are the final piece of the puzzle. They allow you to apply completely different CSS rules based on the viewport's width, enabling you to radically change a layout for mobile, tablet, and desktop screens.
Can't find a good explanation? Sign up and we'll make it for you
Sign up