Let’s talk about rem and em in detail

Let’s talk about rem and em in detail

Let’s talk about rem and em in detail

CSS is a critical part of any website design, but understanding the nuances of how to use it can be tricky. remIn this article we will introduce the and in CSS em. Understanding the difference between these two units is crucial for web developers who want to create flexible, responsive web pages that are easy to maintain and modify.

We'll look at the details of emand rem, their differences, when and how to use them, and practical examples of emand . remBy the end of this article, you should have a detailed understanding of both units. Without further ado, let’s get started.

1. Em and rem units in CSS

When looking for ways to specify length in CSS, we have many options. All units of length specified in CSS fall into two categories.

Absolute lengths : Absolute lengths, as the name suggests, are absolute; they are fixed and not relative to anything. This means that no matter what happens, they are the same size. Absolute lengths include cm, mm, in, px, ptsand pc.
Relative length : Relative lengths are units of a specified length relative to another unit, that is, they react based on other specified units or elements. They include %, vmax, vmin, vh, vw, ch, ex, as well as the units we will discuss emand rem.

Now let's take a look at the two units we got here.

2. em in CSS

As mentioned above, emthe unit in CSS is a relative unit of measurement used to measure the size of elements on a web page, mainly font size. Because it is relative to its parent element, 1 is emequal to the font size set in the parent element .

This means that if you divset the font size in the parent to 20px, and divset the font size in the child to 2em, then divthe font size in the child will be equal to 40px.

Here is a chestnut. First, let's write some HTML:

<div class="parent">
  I'm parent div set to 20px
  <div class="child">
    I'm the child div set to 2em, i.e 40px.
  </div>
</div>

Next is the CSS:

.parent{
    
    
  font-size: 20px;
}

.child{
    
    
  font-size: 2em;
}

p {
    
    
  font-size: 1.5em;
}

You will get the following results:

emUnits are useful because they allow you to resize elements on the page based on the previously mentioned element's font size, which helps create a consistent visual hierarchy. This is helpful for creating accessible websites that are easy to read for users with visual impairments.

It should be noted that if you do not specify a value for the parent element, the browser's default value will be used as the parent element.

p {
    
    
  font-size: 1.5em;
}

In this example, font-sizethe property is set to 1.5em, meaning that if there is no direct parent element, <p>the text size in the element will be 1.5 times the browser's default font size.

Since most browsers adjust their default font sizes based on the size of the screen, this allows you to create flexible, responsive layouts that adapt to different screens and font sizes.

In addition, emunits can also be used to set the size of other element attributes, such as margin, paddingand border.

3. rem in CSS

Now that we know what it is em, let's take a look rem. remis another unit of measurement of length in CSS that represents root em. Since we know emthat is equal to the size of the current font, we can infer that root emrefers to the font size of the root element, which is usually <html>the element.

Like em, remit also inherits its size from the parent element, but remthe parent element it looks at is not the divor above it section, but the first element surrounding it, which is htmlthe element. Let's make an example using the previous code. The same htmlcode, just one more div.

<div class="parent">
  I'm parent div set to 20px
  <div class="child">
    I'm the child div set to 2em, i.e 40px.
  </div>
  <div class="child-2">
      I'm the child div set to 2em, i.e 60px.
  </div>
</div>

Next is our CSS:

.parent{
    
    
  font-size: 20px;
}

.child{
    
    
  font-size: 2em;
}

p {
    
    
  font-size: 1.5em;
}

html{
    
    
  font-size: 30px;
}

.child-2{
    
    
  font-size: 2rem;
}

You will get the following results:

As you can see, despite being inside child-2 divanother divelement, it goes all the way back to htmlthe element to inherit its font size.

Using remunits allows for greater scalability and flexibility in the size of elements on the page, because if you change the font size of the root element, all remelements sized using units will automatically update to maintain their relative sizes.

4. The difference between em and rem

Now, you already know the difference between emand rem, but for the sake of clarity, I want to restate the difference between these two values. In CSS, remunits are only relative to the document's root element , and emunits are only relative to the target element's immediate parent . This means emthat the size of is inherited from the parent element, while remthe size of is only inherited from the root element.

5. Usage scenarios of em and rem

For global values such as font-size, marginand , it's a good idea to use units, especially if you want to specify a font size for the entire document and have it scale uniformly, rather than being affected by the font size of the parent element.paddingrem

emMore suitable for values specific to an element and its children. This allows you to create a consistent yet flexible layout that adapts well to different screen sizes and font sizes. emHowever, there are potential issues with using the and remunits in CSS . While emand remare by far the best units to use when specifying lengths, like all things in life, they are not perfect.

Here are a few issues you may encounter when using emand :rem

Complex calculations : Using emthe and remunits can lead to complex calculations, especially when nested elements are involved. This can make it difficult to accurately predict and control the size of elements on the page.
Inheritance issues : Because emunits are relative to the font size of its parent element, it is difficult to understand and control how the size of the entire page is inherited. This may lead to unexpected results that require additional debugging to resolve.
Performance issues : In some very rare cases, using the emand remunits can have a negative impact on performance, especially when combined with complex calculations or used too much on one page.

Overall, while the emand remunits are fine in some situations, it's important to carefully consider their potential drawbacks and whether they are the best choice for your project.

If you made it this far, congratulations! You now know all there is to know about emand remand why we need them. If this article is helpful to you, please click three links.