Explain the difference between em and rem units in CSS

Expert Posts
, ,
1

The difference between em and rem units in CSS lies in their reference point for calculating the size.

  1. em units: - The em unit is relative to the font-size of its nearest parent element or the element itself.
  2. If no font-size is specified on the element or its parent, the browser’s default font-size is used.
  3. For example, if the font-size of an element is set to 16 pixels (px), 1em is equal to 16px, 2em is equal to 32px, and so on.
  4. When using em units, the size of an element is affected by its parent’s font-size, which can lead to cascading effects.
  5. rem units:
  6. The rem unit is relative to the root element (usually the element) font-size.
  7. It provides a consistent size regardless of the nesting level of elements.
  8. For example, if the root element’s font-size is set to 16px, 1rem is equal to 16px, 2rem is equal to 32px, and so on.
  9. When using rem units, the size of an element is not affected by its parent’s font-size, making it easier to maintain consistent sizing across the entire document.

Here’s an example in HTML format to demonstrate the difference:

<!DOCTYPE html>
<html>
<head>
<style>
body {
font-size: 16px; /* Root element font-size */
}
.parent {
font-size: 1.5em; /* 1.5 times the parent's font-size */
}
.child-em {
font-size: 1em; /* Relative to the parent's font-size */
}
.child-rem {
font-size: 1rem; /* Relative to the root element's font-size */
}
</style>
</head>
<body>
<div class="parent">
Parent Text
<div class="child-em">Child Text (em)</div>
<div class="child-rem">Child Text (rem)</div>
</div>
</body>
</html>

In this example, the parent element has a font-size of 1.5em, which means it will be 1.5 times the root element’s font-size (16px * 1.5 \= 24px). The child element with class “child-em” has a font-size of 1em, so it will be the same as the parent’s font-size (24px). However, the child element with class “child-rem” has a font-size of 1rem, so it will always be the same as the root element’s font-size (16px), regardless of the parent’s font-size.