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 CSS Basics (2014) The Box Model Margins

Masae Okada
Masae Okada
5,742 Points

Margin, em unit

Where is margin-em relative to?

In this video(The Box Model-Margins), Guil uses em unit to margin. For example,

h3 {

font-size: 1.25em; /* 20px */

margin-bottom: 1.7em; /* 34px */

}

The parent's element of the h3 is body and its font size is 16px, so font-size 1.25em in h3 is 20px. Em unit is relative to the font size of parent's element, so I thought margin-bottom should be relative to body's font size(=16px). Here, margin-bottom is relative to 20px of h3's font-size. Why is margin-bottom relative to h3's font-size, not body's font-size? Is this because of compounding effect? If so, What if I change the declaration's order like this:

h3 { margin-bottom: 1.7em; font-size: 1.25em;
}

Would the margin-bottom become 27px and the font-size become 34px?

2 Answers

Hi Masae,

em's are primarily use for text to scale their properties or adjust them. Guil is targeting the h3 which consist of text. So he is targeting the space between the text itself. You can re-order the margin-bottom and the font-size and it should still work.

Hope this helps!

Matteo Simeone
Matteo Simeone
13,365 Points

Hi Masae, 1 em is equal to the font size of the element to which is applied. If em units are declared on child elements in which a font-size property isn't defined, they'll inherit their font-size value from their parent. This is why in this example the margin-bottom property em unit is relative to h3 font size, while the h3 font-size property em unit is relative to the body font size.