Design comparison
Solution retrospective
I'm still unsure about when to use rem vs em, I would appreciate any input on the matter.
Community feedback
- @manjeshrv592Posted almost 2 years ago
By default browsers font size is 16px.
1rem always defaults to 16px no matter where you use it.
1em depends on font size of the parent element. Let's say you have paragraph inside div tag and font size of div is 20px. Then 1em inside that div means 20px.
Suppose you have another div whose fontsize is 36px. Then 1em will be equal to 36px in that div.
If your looking to size a child element based on parent then you use em.
In practice I never use em and I haven't seen it being used in any projects. Always stick to rem. Advantages of em over rem is negligible and em is lot more confusing to use.
If you want to size child element relative to parent then percentage is the best option.
Marked as helpful1
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord