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

CSS CSS Basics (2014) The Box Model Margins

Masae Okada
Masae Okada
5,742 Points
Posted by 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

Victor Ruiz
Victor Ruiz
16,570 Points
Victor Ruiz
Victor Ruiz
16,570 Points

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,587 Points
Matteo Simeone
Matteo Simeone
13,587 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.