<h1 id="heading-em"><strong>EM</strong></h1>
<ul>
<li>if you set a font-size using em it will be in relation to that elements parents</li>
<li>1 em generally default to 16px </li>
<li><blockquote>
<p>compounding(It build one on top of each other) - causes problem(font-size)</p>
</blockquote>
</li>
<li>in case of margin and  padding it looks at the font-size of the (element)block </li>
</ul>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1664305087203/aVrzZaht0.png" alt="image.png" /></p>
<ul>
<li>super use full for button</li>
</ul>
<h1 id="heading-rem"><strong>REM</strong></h1>
<ul>
<li>sole purpose of fixing whole componding problem</li>
</ul>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1664303862316/UoltGoIRB.png" alt="image.png" /></p>
<ul>
<li><p>look at the Html/root elements font-size</p>
</li>
<li><p>more consistent always look at Html/root</p>
</li>
<li>in case of margin and padding also rem always look at the root (<strong>font-size</strong>)</li>
</ul>


# **EM**

- if you set a font-size using em it will be in relation to that elements parents
- 1 em generally default to 16px 
- > compounding(It build one on top of each other) - causes problem(font-size)
- in case of margin and  padding it looks at the font-size of the (element)block 

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1664305087203/aVrzZaht0.png align="left")
-  super use full for button



# **REM**

- sole purpose of fixing whole componding problem

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1664303862316/UoltGoIRB.png align="left")

- look at the Html/root elements font-size

- more consistent always look at Html/root
- in case of margin and padding also rem always look at the root (**font-size**)

   








ripan blog

ripan blog

EM vs REM

EM

REM