Lengths Based on Font size (em & rem) - sandrooliveira/advanced-css-course GitHub Wiki

We can define lengths and font-sizes using relativity units em & rem.

Considering the code below, the padding will be 32px, because when we use "em" for length it means that the value will be x * the value of the font-size of the current element.

.myClass {
font-size: 16px;
padding: 2em;
}

HOWEVER!!! If you use em for font size, like in the example below, the font-size will be 3 * the parent font-size. In the example used below, we don't have a parent element, so it will take the default font-size from browser (which is normally 16px), so the font size will be 48px.

.myClass {
font-size: 3em;
}

Now, talking about the rem, it will ALWAYS use root font size as a reference for both lenghts and font-sizes.

"It is nice to have lenghts based on font-size because with that can build robust response layout, because just by changing the font-size, it automatically change the lenghts".