March 21, 2022

absolute vs relative

absolute - px
relative - %, v*, em, rem

(16px is the pixel that the browser provides default)

em
1em = 16px

for example,
parent > child

.parent{
font-size: 8em;
}

.child{
font-size: 0.5em;
}

parent font size - 16px * 8 = 128px
child font size - 128px(parent font size) * 0.5 = 64px

rem
root em

root = html

parent > child

.parent{
font-size: 8rem;
}

.child{
font-size: 0.5rem;
}

parent font size - 16px * 8 = 128px
child font size - 16px * 0.5 = 8px