Introduction
As a Web Developer, I sometimes get confused about which unit to use for CSS properties. Should I use px, rem, em, vh, vw or %?. Understanding how different units in CSS work is essential to create responsive, scalable, and consistent designs. Units define the size of elements, spaces, margins, paddings, and fonts, so getting familiar with them will help us control the visual aspects of your website more effectively.
In this beginner guide “CSS Units Explained” , we’ll see what are CSS units and explore the most commonly used CSS units—px, rem, em, vh, vw, and %—and help you understand when and how to use each one. Whether you’re a beginner or looking to brush up on your knowledge, this guide will walk you through the essentials.
What Are CSS Units?
CSS units define the size of HTML elements and their various properties. When you specify a size in CSS, such as font-size, padding, or margin, you need to define it using a unit. CSS units can be divided into two main types:
- Absolute units: Fixed sizes that don’t change regardless of the context.
- Relative units: Sizes that adjust based on other elements or the viewport size.
Absolute Units: px (Pixels)
The px is the most commonly used absolute unit in CSS. In digital imaging, a pixel is smallest unit of measurement that represents a single point. Because px is an absolute unit, it doesn’t scale based on screen size or the user’s preferences.
When to Use px:
- Pixel-perfect designs: If you want elements to have an exact size, px is useful.
- Icons and small elements: The px should be used for precise control over small design elements like icons, borders, or buttons.
- Fixed layouts: When you’re building a fixed layout that doesn’t need to be responsive on smaller devices or mobile devices, using px gives you more control.
Example:
body {
font-size: 16px;
}Here, the font size is fixed at 16 pixels regardless of screen size.
However, the drawback of using px is that it doesn’t scale well for responsive design. On smaller screens or larger displays, fixed sizes can lead to usability issues. We’ll continue our discussion on CSS Units Explained by exploring what are relative units.
Relative Units: rem and em
Relative units like rem and em are more flexible than px. They can scale or change based on the context, which is especially important for creating flexible and responsive design.
rem (Root em)
rem stands for “root em” and is relative to the root element (<html>). This means that every element defined in rem scales based on the font size of the root element. By default, the root element has a font size of 16px, so 1rem equals 16px unless changed.
When to Use rem:
- Consistency: rem is ideal when you want consistent scaling across your layout.
- Responsive typography: Since rem scales based on the root element, it’s easier to manage typography across different devices.
- Accessibility: Users can increase or decrease their browser’s root font size, making websites using rem more accessible.
Example:
html {
font-size: 16px;
}
p {
font-size: 1.5rem; /* equals 24px */
}In this example, the paragraph text size is 1.5 times the root font size, or 24px.
em (Element em)
em is similar to rem, but instead of being relative to the root element, it’s relative to the parent element’s font size. This means that em can compound—if an element inside another element is sized in em, it may scale unexpectedly if not carefully managed.
When to Use em:
- Local scaling: em is great for scaling elements based on their parent container.
- Spacing and padding: The em is more useful for margins, paddings, and other spaces that should scale in relation to text size.
Example:
p {
font-size: 1.2em; /* 1.2 times the size of the parent font size */
}If the parent font size is 20px, the paragraph will be 24px.
Viewport Units: vh and vw
Viewport units, vh (viewport height) and vw (viewport width), are relative to the size of the browser window.
- 1vh is equal to 1% of the viewport height.
- 1vw is equal to 1% of the viewport width.
These units are perfect for creating responsive designs that adapt to different screen sizes.
When to Use vh and vw:
- Full-page layouts: For elements that should span the entire height or width of the screen, vh and vw work well.
- Responsive typography: You can create text that scales fluidly with the viewport size using vw.
- Hero sections: For sections that need to take up a portion or all of the viewport, vh is ideal.
Example:
section {
height: 100vh; /* Takes up 100% of the viewport height */
}
h1 {
font-size: 5vw; /* Scales based on 5% of the viewport width */
}In this example, the section spans the full height of the browser, and the heading scales with the viewport width.
Percentage: %
Percentage units are relative to the parent element’s size. When you set the width, height, padding, or margin of an element in %, it scales according to the size of its containing element.
When to Use %:
- Fluid layouts: % is great for creating fluid grids and responsive designs that adjust as the parent container changes size.
- Flexible spacing: You can use % to create flexible padding and margins that adapt to the parent’s size.
- Height and width adjustments: When building layouts that adjust to screen sizes or parent elements, % ensures dynamic resizing.
Example:
div {
width: 50%; /* Element takes up 50% of its parent container’s width */
padding: 10%; /* Padding will be 10% of the parent’s width */
}Here, the width and padding scale based on the parent container, making the element responsive.
Choosing the Right Unit
With so many CSS units available, how do you choose the right one for your project? Here are some guidelines:
- Use
pxfor precise, fixed layouts where scaling isn’t a priority. - Use
remfor global typography that scales consistently across your site. - Use
emwhen you want local scaling relative to a parent element. - Use
vhandvwfor responsive layouts based on the viewport size. - Use
%for fluid, responsive designs that adapt to their parent element’s size.
Conclusion
Understanding and choosing the right CSS unit can significantly impact the responsiveness and usability of your website. While px gives you control over exact sizes, rem, em, vh, vw, and % offer flexibility, especially for responsive design. As a newbie developer, if you experiment with these units, it will help you become more comfortable with CSS and will improve your design skills.
By utilizing these CSS units in an effective way, you can create scalable, responsive, and user-friendly web designs that look great on any device. So keep experimenting and Happy coding!
P.S.: Read here if you want to know what are the Top 10 CSS Libraries You Should Know As Web Developer.
Related Articles:
What is CSS Flexbox?: A Beginner’s Guide to Responsive Layouts
