Live editor for all the examples will be added soon.
CSS uses different units to define the size, spacing, and layout of elements on a webpage. The most commonly used units are pixels (px), percentages (%), EMs (em), and REMs (rem). Each unit behaves differently and has specific use cases. In this guide, we’ll break down these units, explain how they work, and when to use each one effectively.
1. Pixels (px)
What are Pixels?
Pixels (px) are a fixed unit of measurement in CSS. One pixel is a tiny square that is part of the display screen. Using pixels gives you exact control over the size of an element. Since pixels are an absolute unit, they don’t scale with the size of the user’s viewport or font settings, which means they are not flexible or responsive.
Syntax:
font-size: 16px;
width: 400px;Example:
<p style="font-size: 18px;">This paragraph has a font size of 18px.</p>
<div style="width: 300px; height: 200px; background-color: lightblue;">
This div is 300px wide and 200px tall.
</div>In this example, the font size is set to 18px, and the width and height of the <div> are 300px and 200px, respectively.
When to Use Pixels:
- Use pixels when you need precise control over an element’s size.
- Pixels are great for small, fixed elements like icons, buttons, and borders where exact dimensions are necessary.
Pros:
- Precise and consistent across all browsers.
- Ideal for fixed layouts and elements where you need exact control.
Cons:
- Not responsive. It doesn’t adjust to different screen sizes or user settings.
- Can cause accessibility issues for users who scale up text sizes.
2. Percentages (%)
What are Percentages?
Percentages (%) are a relative unit that define size in relation to the parent element. The size of an element with a percentage value changes based on the size of its containing (parent) element. Percentages are often used for creating responsive designs, where elements scale with the size of the viewport.
Syntax:
width: 50%;
height: 75%;Example:
<div style="width: 50%; height: 100px; background-color: lightgreen;">
This div is 50% of the parent container's width.
</div>In this example, the width of the <div> is 50% of its parent element’s width, meaning that it will adjust if the parent’s width changes.
When to Use Percentages:
- Percentages are great for fluid layouts that need to adjust based on screen size.
- Use percentages when you want elements (like images or containers) to scale proportionally with their parent container or the viewport.
Pros:
- Responsive: Elements can resize automatically based on their container or viewport size.
- Perfect for fluid and flexible designs.
Cons:
- Can be difficult to control precisely, especially when nesting elements.
- Requires a clear understanding of parent-child relationships in HTML.
3. EMs (em)
What are EMs?
EM (em) is a relative unit that is based on the font size of the nearest parent element. If no parent element has a specific font size, the EM unit is based on the default font size of the root element, which is usually 16px in most browsers.
1em is equal to the current font size of the parent element. For example, if the parent element has a font size of 20px, then 1em is 20px.
Syntax:
font-size: 2em;
padding: 1.5em;Example:
<div style="font-size: 20px;">
<p style="font-size: 1.5em;">This text is 1.5 times the size of its parent element's font size.</p>
</div>In this example, the parent element has a font size of 20px, so the paragraph inside it will have a font size of 1.5 * 20px = 30px.
When to Use EMs:
- EMs are useful for scalable typography and spacing within components. If you want to scale elements relative to a parent element’s font size, EMs are a good choice.
- Great for adjusting margins, paddings, and font sizes that scale with the text size.
Pros:
- Scales with the parent element, making it flexible.
- Allows for responsive typography that adjusts based on the context.
Cons:
- Can become tricky to manage when nesting elements because each nested element’s size is affected by its parent’s font size.
4. REMs (rem)
What are REMs?
REMs (Root EM) are similar to EMs, but they are always relative to the font size of the root element (<html> tag). This means that REMs are not affected by the font size of parent elements, making them easier to manage in complex layouts.
By default, the root font size is 16px, so 1rem is typically equal to 16px unless otherwise specified.
Syntax:
font-size: 1.5rem;
padding: 2rem;Example:
<p style="font-size: 1.5rem;">This paragraph has a font size of 1.5rem, which is 1.5 times the root element's font size (usually 16px).</p>In this example, the paragraph’s font size is 1.5 * 16px = 24px because the root element’s font size is 16px by default.
When to Use REMs:
- Use REMs for a more consistent approach to scaling elements based on the root font size.
- REMs are ideal when you want to create typography and layouts that scale globally based on the root element’s size, making them perfect for responsive designs.
Pros:
- Provides consistency across the entire layout, since REMs are always based on the root font size.
- Great for responsive typography that scales with user settings.
Cons:
- Dependent on the root font size, which might vary if the user or developer changes it.
5. Comparison of Pixels, Percentages, EMs, and REMs
Each unit has its strengths and specific use cases. Here’s a quick comparison:
| Unit | Description | Example | Best For |
|---|---|---|---|
| Pixels (px) | Fixed size, doesn’t scale with parent or viewport. | font-size: 16px; | Exact sizing where precision is needed. |
| Percent (%) | Relative to parent element’s size. | width: 50%; | Responsive layouts that scale with containers. |
| EM (em) | Relative to parent element’s font size. | padding: 1.5em; | Scalable typography and components. |
| REM (rem) | Relative to root element’s font size. | font-size: 2rem; | Consistent typography that scales globally. |
6. Choosing the Right Unit
When to Use Pixels:
- Use px when exact sizing is required, such as for small, fixed components like icons, borders, or buttons.
When to Use Percentages:
- Use % when designing responsive layouts, especially for containers, images, and elements that need to scale with the viewport or parent container.
When to Use EMs:
- Use em for internal components, such as padding, margin, and font sizes that should scale relative to the parent element’s font size.
When to Use REMs:
- Use rem for consistent font sizes and spacing that should scale with the root element’s font size, making it ideal for responsive typography.
7. Practical Examples Combining Units
Example of Using Pixels, Percentages, EMs, and REMs:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Units Example</title>
<style>
/* Setting the root font size */
html {
font-size: 16px; /* 1rem = 16px */
}
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
/* A container using percentages */
.container {
width: 80%;
margin: 0 auto;
background-color: lightgray;
padding: 20px;
}
/* A heading using rems for consistent typography */
h1 {
font-size: 2rem; /* 32px (2 * 16px) */
margin-bottom: 1rem;
}
/* A paragraph using ems for relative scaling */
p {
font-size: 1.25em; /* 1.25 times the parent font size */
line-height: 1.6;
}
/* A button using pixels for exact sizing */
button {
padding: 10px 20px;
font-size: 16px;
background-color: teal;
color:
white;
border: none;
cursor: pointer;
}
</style>
</head>
<body>
<div class="container">
<h1>Understanding CSS Units</h1>
<p>This is a paragraph inside a container. The width of the container is 80% of the viewport, and the text size is 1.25em, meaning it scales with the parent font size.</p>
<button>Click Me</button>
</div>
</body>
</html>Explanation:
- Pixels are used for the button size to have exact dimensions.
- Percentages are used to set the container’s width relative to the viewport.
- EMs are used to scale the paragraph text size relative to the parent.
- REMs are used to set the heading size relative to the root element, ensuring consistent typography.
Conclusion
Choosing the right unit in CSS depends on your design goals and how flexible or fixed you want your layout to be. Pixels are best for precise, fixed sizing, while percentages allow for responsive designs. EMs scale relative to their parent elements, making them ideal for internal scaling within components.
REMs provide consistent scaling based on the root font size, perfect for responsive typography. By understanding these units, you’ll have more control over your layouts and create designs that are both flexible and accessible.