Building Flexible Layouts with px, em, and rem in CSS

Published in

TechVerito

3 min readJul 2, 2024

When it comes to styling web pages with CSS, understanding the different units of measurement is crucial. Three common units are px , em , and rem . Each has its unique characteristics and use cases. This blog will explore these units with practical examples to help you understand when and how to use them effectively.

Pixels (px)

The px unit represents pixels, the smallest unit of measurement on a screen. Pixels are an absolute unit, meaning they maintain the same size regardless of other settings.

Example: Fixed button

.button {
  height: 60px;
  background-color: red;
  color: white;
}

In the above example, the button will always be 60 pixels tall, providing a stable and predictable layout.

Ems (em)

The em unit is relative to the font size of the element to which it is applied. One em equals the current/parent element font size of the element, making it useful for scalable and responsive designs. if the font size changes, the size defined in em will adjust accordingly.

Example: Scalable Padding in a Button

Consider a button with padding that should scale based on the button’s font size. If the font size changes, the padding adjusts proportionally, maintaining the button’s design integrity.

.button {
  font-size: 18px; // assume the button's font size is 18px;
  padding: 0.5em 1em; // Vertical padding is 9px, horizontal padding is 18px;
}

Here, the padding values will change if the font size of the button changes, ensuring the padding remains proportional to the text size.

Root Ems (rem)

The rem unit is similar to em but is relative to the root element (usually the <html> element) rather than the parent element. This ensures consistency across the entire document, as rem units always refer back to the root font size.

Example: Consistent Margin for All Sections

Suppose you want all sections of your website to have a consistent margin based on the root font size, ensuring uniform spacing regardless of their parent element’s font sizes.

html {
  font-size: 16px; // Base font size for the document
}

.section {
  margin: 2rem;  // 2 times the root font size, so 16x2 = 32px;
}

When to Use Each Unit

px: Use for elements requiring precise, fixed dimensions (e.g., borders, fixed-size containers).
em: Use for elements that should scale in relation to their own font size, such as padding or margins that need to adjust with the text size.
rem: Use for ensuring consistent sizing across the entire document, ideal for margins, padding, or font sizes that should maintain uniformity regardless of nesting or inheritance.

Conclusion

Understanding the differences between px , em , and rem can greatly enhance your CSS skills and help you create more responsive and flexible designs. By knowing when to use each unit, you can ensure that your web pages look great on any device and under any conditions.

For a detailed guide on CSS values and units, check out this MDN Web Docs article.

Happy Coding! ⌨️