Do You Don’t Understand [em] Unit In CSS3 Yet? 😅 — Basic Explain

Maybe you’re think right now: oh, this is a basic post for begginers web developers , and you’re right! but if we see it from another way, there are a lot of people like; graphic designers, ux/ui designers, “full stack developers” and even front-end developers! that doesn’t have an idea of how it works or how to use em unit in CSS3, if you are part of this people or not, don’t worry, I try to help you with this simple post.

First, you need to know — Absolute and Relative lenghts units 👀

I’m sure that you know what is a unit in CSS3, the most popular is px, we use this unit for declarate the lenght in fonts, container, images, borders, margines, and etc. Pexels is a absolute unit, because is fixed, and any lenght expressed in this will always have an exact size. As px exist others absolute units: cm, mm, in, pt and pc (but right now we don’t care about that)

And on the contrary a relative lenght unit is flexible, because its value is not fixed, this value is referenced for other value 😵 keep calm, you will understand it.

The most popular relative units are % and em, if you have already worked with the flex-box concepts, maybe you used % to express values of lenght in your elements as width or height, and these have a referenced length value of parents elements.

So… What is em unit? 😐

The different with the % Unit is, the em unit is used for font sizes, where the value is reference of the closest element that has specified a font size before

em is a Relative Unit to the closest especified font size.

Go to Example!❤️

<nav style = "font-size: 16px;">  <!-- inital size 16px --> 
    <ul style = "font-size: 1em;">  <!-- 1em = 16px -->
        <li style = "font-size: 2em;"> <!-- 1em = 16px, 2em = 32px -->
          <a href= "" style = "font-size: .5em;"></a> <!-- 1em = 32px, .5em = 16px -->
        </li>
    </ul>
</nav>

1. In our nav element we assign a font-size of 16px, this is our initial size.

2. As our initial size is 16px, when we declared in ul element a font-size of 1em, this takes 16px as 1em. (remember it, em unit takes the font-size value of the closest element, in this case nav)

3. In li element we declared a font-size of 2em, correct! the value of 2em is 32px, cool!

4. Pay attention, in the four line, we declared a font-size of .5em for our a element, right? but maybe you’re thinking now, why the font-size value is 16px? This happens because the last value declared in the closest element was 32px (no matter if was for 2em, now the new value for 1em is 32px) then, .5em is equals to the middle of 1em, so the final font-size is 16px.

When should we use the em unit? 👌

How we already know, the em unit is relative, like % in flex-box, we can use em when we’re doing responsive design.

It is a good practice because when we are doing responsive design, we will only have to declare the font size of the main element in px, and in the children in em, so, when we adapt the design to different device sizes, we will only change the font size in the main element and the children elements will adapt.

thanks for read, I hope this is very useful for you.