Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

Ivan Uvarov
Ivan Uvarov
22,403 Points

Why convert to em?

As I know the purpose of using ems is to make font size to be relative to the parent's font size. So, if you change parent's font size, the element's font size should scale accordingly. But in this video when we set font size to be em(24px) it will always be 24px no matter what the base font size is. So why use em(24px) in this case and not just 24px?

2 Answers

The idea behind ems is to use a scalar value. So, the value would be set to 1.1em and the result would be a font that is 1.1 times bigger than the parent value.

ellie adam
ellie adam
26,376 Points

http://www.w3schools.com/tags/ref_pxtoemconversion.asp

Each is a unit of length used to define the size of elements on a webpage. You can use them across the board on divs, margins, padding, and so on, Ems are a relative measure of length. The size of an em is relative to the font-size of its parent element. If you have a <div> with the font size is set to 16px, and a <p> element inside that div with a font-size set to 2em, the font-size of text in the <p> will be 32px; set it to 0.5px, and the font-size will be 8px. As you might imagine, this is great for responsive design, where you can set breakpoints for device screen sizes with media queries, change the absolute px measure for elements at different break points, and have all the em-measured elements resize for you — it makes responsive CSS much easier to write and maintain.