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)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

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

Okay