CSS CSS Basics 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
12,928 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.