Do You Don’t Understand [em] Unit In CSS3 Yet? 😅 — Basic Explain
Tags: css, html, webdev, beginners
Published: 2019-08-27 03:49:30

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!❤️

```html
<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.