Design comparison
Solution retrospective
Although I tried to used rem to style different things like font-size, margins, paddings, and widths, I'm not sure how effective some of it was. I also didn't use percentages because I don't think it would have been necessary for this challenge in particular. What are some general rules of thumb that I can use to figure out which measurement to use?
Community feedback
- @seangray-devPosted almost 2 years ago
Hey Ralph! Nice job on this.
Here are some tips for your question:
The em unit em are relative to their parent’s font size When used on anything else other than font-size it’s relative to the font-size of it’s own element font-sizes is an inherited property, so if you don’t declare it anywhere, it’s getting it from the body (or the default which is normally 16px) The problem with em: when we use em for font-size of an element, it can create a cascading effect.
The rem unit The rem unit is short for Root Em That means it’s always relative to the ‘root’ of our document The root of an HTML page is always the HTML element
How to decide which unit to use?
Pixels used to cause a lot of problems, as they were a fixed unit (1 dot on the screen) Now it follows the reference pixel.
General rule of thumb (not hard and fast rules) :
- Font-size = rem
- Padding and Margin = em
- Widths = em or percentage
Hopefully you find this helpful! Happy coding, keep it up 😁
Marked as helpful1
Please log in to post a comment
Log in with GitHub
Join 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