CSS Interview Questions

28 Questions
HTML & CSS

HTML & CSS

Web DevelopmentFrontend

Question 20

What is the difference between em and rem units in CSS?

Answer:

In CSS, em and rem are both relative units of measurement used for sizing elements, such as font size, padding, margins, and more. While they might seem similar, they have distinct differences in how they calculate their relative sizes. Understanding these differences is key to using them effectively in responsive design.

em Units

  • Relative to Parent Element: The em unit is relative to the font size of the element's parent. This means that if you use em for sizing, the size is calculated based on the computed font size of the parent element.
  • Cascading Effect: Because em is relative to the parent, nested elements can compound the size effect. For example, if a parent element has a font size set in em, any child elements using em will be calculated relative to the parent's computed font size.

Example:

/* Assuming the default font size of the browser is 16px */

body {
    font-size: 16px; /* 1em = 16px */
}

.container {
    font-size: 1.5em; /* 1.5em = 24px (1.5 * 16px) */
}

.container p {
    font-size: 2em; /* 2em = 48px (2 * 24px, relative to the .container's font size) */
}
  • In this example:
    • The container element's font size is 24px because 1.5em is 1.5 times the body font size (16px).
    • The p element inside container has a font size of 48px because 2em is 2 times the container's font size (24px).

rem Units

  • Relative to Root Element: The rem unit stands for "root em" and is relative to the root element's (<html>) font size. Unlike em, it does not depend on the parent element's font size, making it easier to predict and control.
  • Consistent Sizing: Since rem is relative to the root font size, it provides more consistent sizing across different elements, regardless of their nesting level.

Example:

/* Assuming the default font size of the browser is 16px */

html {
    font-size: 16px; /* 1rem = 16px */
}

.container {
    font-size: 1.5rem; /* 1.5rem = 24px */
}

.container p {
    font-size: 2rem; /* 2rem = 32px */
}
  • In this example:
    • The container element's font size is 24px because 1.5rem is 1.5 times the root font size (16px).
    • The p element inside container has a font size of 32px because 2rem is 2 times the root font size (16px), regardless of the container's font size.

Key Differences Between em and rem

  1. Reference Point:

    • em: Relative to the computed font size of the parent element.
    • rem: Relative to the root element's (<html>) font size.

  2. Cascading Effect:

    • em: Can compound when used in nested elements, leading to potentially unexpected sizes.
    • rem: Consistent and predictable because it always references the root font size.

  3. Use Cases:

    • em: Useful when you want an element's size to scale relative to its parent, like in component-based designs where components should scale together.
    • rem: Ideal for setting consistent sizes across the entire document, such as base font sizes, spacing, and other global styles, while maintaining predictability.

When to Use em vs. rem

  • Use em when you need sizes to be relative to the element's parent, allowing for scalable components or text that adapts to its container.
  • Use rem when you want consistent sizing throughout your document, or when you want to avoid the complexity of compounded values in deeply nested elements.

Example of Combined Usage:

html {
    font-size: 16px;
}

.container {
    padding: 2rem; /* 32px padding, consistent across the page */
    font-size: 1.25rem; /* 20px font size */
}

.container h1 {
    margin-bottom: 1em; /* 1em = 20px, relative to .container's font size */
    font-size: 2em; /* 2em = 40px, relative to .container's font size */
}

.container p {
    margin-bottom: 1.5em; /* 1.5em = 30px, relative to .container's font size */
}
  • Here, rem is used for setting global and consistent dimensions like padding and font size across elements. em is then used within the .container to maintain relative sizing based on the container's font size.

Conclusion

em and rem units are powerful tools in CSS for creating responsive and scalable designs. em is best for relative, component-specific scaling, while rem offers consistency across your entire design by always referring to the root font size. Understanding the differences and when to use each allows you to build more flexible and maintainable layouts.

Recent job openings