Rem vs em

Em vs rem

1EM or 1REM (r = root em)
The difference is inheritance.
The Rem value is based on the root element (html).
What is meant here is the font size for html and not the font size for the documet body.
... Em is based on the font size of each
Parent element.

Rem vs em

/* rem */
Translation of rem units to pixel value is determined by the font size
of the html element. This font size is influenced by inheritance from 
the browser font size setting unless explicitly overridden with a unit 
not subject to inheritance (px or vw). 

/* em */
Translation of em units to pixel values is determined by the font size 
of the element they’re used on. This font size is influenced by 
inheritance from parent elements unless explicitly overridden with 
a unit not subject to inheritance. ---> change the menu’s font size the
spacing (paddings etc) around the menu items will scale proportionately,
independently of the rest of the layout.

Source: webdesign.tutsplus.com

Similar codes

0 vote205 views1 answer
Background single line property css
CSS
-2 votes220 views2 answers
Scss how to declare variable for multiple files
CSS
1 vote220 views6 answers
Tailwind css in react
CSS
0 vote236 views1 answer
Studio 3t restore snapshot
CSS
-1 vote208 views1 answer
Sidebar-Content layout
CSS
2 votes162 views2 answers
Box shadow all sides w3schools
CSS
1 vote201 views1 answer
Gatsby hide scroll bar
CSS
0 vote201 views1 answer
How to make a text in center with background color in css
CSS
0 vote195 views1 answer
Extend Report jenkins css missing
CSS
0 vote189 views1 answer
How to slide div from left to right using css
CSS