DEV Community

Hyunjin Cho
Hyunjin Cho

Posted on

2 1

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

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay