🌐 CSS Units: When and How to Use Them

In CSS, there are many units to choose from when defining sizes and spacing, such as px, rem, em, vw, and others. Each unit has its strengths, so knowing when to use them is important. This guide will help you understand the most common CSS units and when to use them.

🔒 Absolute Units

📏 px (pixels)

• Definition: Fixed units that represent one pixel on the screen.

When to use: Use px when you need precise control, like for border-radius or box-shadow. It's good when you need small, exact values that won’t change based on screen size.

Example:

.button {
  border-radius: 5px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

🔄 Relative Units

📐 rem (root em)

• Definition: Relative to the font-size of the root element (html).

When to use: Use rem for font sizes, padding, and margins in layout. It ensures your layout scales consistently across different devices, based on the root font-size (typically 16px).

Example:

h1 {
  font-size: 2rem; /* Equals 32px if the root font-size is 16px */
}

📏 em

• Definition: Relative to the font-size of the parent element.

When to use: Use em when you want an element’s size to depend on its parent. It's commonly used for padding and margins in components where the text size might vary.

Example:

.button {
  padding: 0.5em 1em; /* Padding is relative to the button's font size */
}

📱 vw (viewport width)

• Definition: 1% of the viewport’s width.

When to use: Use vw for responsive layouts that scale with the width of the browser window.

Example:

.full-width {
  width: 100vw; /* Full width of the viewport */
}

📐 vh (viewport height)

• Definition: 1% of the viewport’s height.

When to use: Use vh to set elements that should be sized relative to the height of the screen.

Example:

.hero-section {
  height: 100vh; /* Full viewport height */
}

💯 % (percentage)

• Definition: Percentage of the parent element’s size.

When to use: Use % for layouts that need to adapt based on the size of the parent container.

Example:

.content {
  width: 80%; /* Takes up 80% of the parent element's width */
}

🔍 Less Common Units

🔠 ch (character units)

• Definition: Based on the width of the "0" character in the font.

When to use: Use ch for inputs or text areas where you want to control the number of characters visible.

Example:

input {
  width: 20ch; /* Allows 20 characters to fit */
}

🔧 clamp()

• Definition: A function that allows you to set a size between a minimum, preferred value, and maximum.

When to use: Use clamp() to create flexible sizes that adapt as the screen size changes.

Example:

h1 {
  font-size: clamp(1.5rem, 2vw, 3rem); /* Responsive font size */
}

📦 Example: Styling a Card with rem and em

When building a card component, it's good practice to use rem for layout and em for text or padding that should adjust based on the font size.

/* Card layout with rem for consistent spacing */
.card {
  padding: 2rem; /* Consistent padding across the site */
  margin: 1rem; /* Space between cards */
  border-radius: 0.5rem; /* Rounded corners */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Slight shadow */
}

/* Card title with rem for consistent font size */
.card-title {
  font-size: 1.5rem; /* Font size relative to root font-size */
  margin-bottom: 0.5em; /* Margin based on the title size */
}

/* Card content with rem for consistent text size */
.card-content {
  font-size: 1rem; /* Consistent font size across the site */
  line-height: 1.6;
}

/* Button inside the card using em for padding */
.card-link {
  padding: 0.5em 1em; /* Padding based on the button's font size */
  font-size: 1em; /* Font size relative to the button's text */
  background-color: #007bff;
  color: white;
  border-radius: 0.3rem;
  text-decoration: none;
  display: inline-block;
}

.card-link:hover {
  background-color: #0056b3;
}

HTML Example:

<div class="card">
  <h2 class="card-title">Card Title</h2>
  <p class="card-content">This is some content inside the card. The size is based on rem for consistency across the site.</p>
  <a href="#" class="card-link">Learn More</a>
</div>

💡 Practical Tips:

• Use rem for layout-related spacing, font sizes, and padding across your site. It helps keep everything consistent.
• Use em for text-specific components like buttons or internal padding, so they scale with the text size.
• Use px for small, exact values like border-radius or box-shadow, where precision is important.

🎯 Conclusion

Each CSS unit has its best use case. For a flexible and scalable design, use rem for most of your layout and text sizing, em for element-specific styles that need to adjust based on their context, and px for precise details like borders. By mixing these units correctly, you can ensure that your design is responsive and user-friendly.