Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
SeHyun Choi
3,441 PointsIs it always better to use em instead of rem?
Is it always better to use em instead of rem?
3 Answers
Amber Fuller
4,598 Pointsrem is based off of the root element(e.g. html element font size), while em is based off of the current element's font size.
Antonio De Rose
20,884 Pointsanswer to this question, is purely based on the requirement that you have. rem is based upon the root of the element which is html, if you do not set the html element with a font size, it would be 16 px, em is based upon the parent and child element, if you set up a parent element with 10 px, and call the child element with 2 em, the child would result in 32 px, see the below example run it and see, interchangeably, uncomment 'p' element and comment the already not commented 'p' element for vice versa
<head>
</head>
<body>
<style>
html{
font-size:20px;
}
p{
font-size:3em;
}
/*p{
font-size:3rem;
}*/
.box{
font-size:30px;
}
</style>
<div class="box">
<p>
this is a test
</p>
</div>
</body>
</html>
pat barosy
6,759 PointsUsing em, if you had parent element with 10px and call the child element with 2em, wouldn't the child result in 20px?
What if you had the child was nested two levels deep like this:
<bodyclass="secondary-content t-border">
<h3>From Tents to Resorts</h3>
<p>Lake Tahoe is full of wonderful place to stay. You have the ability to sleep in the outdoors in a tent, or relax like a king at a five star resort. Here are our top three resorts:</p>
</body>
Would <p> take sizing from the body or the <h3>?
Thank you!
Abdullahi Abdinasir Ali
9,520 PointsEm is relative to the font-size of its nearest parent while rem is relative to html.em has the ability to scale area of design and rem ability to scale the entire page easily .using Rem can't get you issues,it will wise to use em over rem because of tendency to design specific area of design. I hope that helps