CODEWITHSUNDEEP
cssfont-size
user1448031
user1448031

Reputation: 2166

Does em in margin and padding take font size as a reference point?

In the code below, do margins on p and h2 take their respective font-size as reference point?

How about margin and padding on div.contact? What do they take their reference point as? Is it the body font-size?

body { font-size: 100%; }
p { font-size: 1em; margin-bottom:0.5em; }
h2 { font-size: 2em; margin-bottm:1em; }
div.contact { margin: 1.5em 0; padding: 0 0.7em; }

Upvotes: 0

Views: 898

Answers (2)

GreyRoofPigeon
GreyRoofPigeon

Reputation: 18123

Yes, the margin and padding in ems are based on the parents font-size.

Let say that you have this markup:

<div class="contact">
    <h2>Heading</h2>
    <p>Paragraph</p>
</div>

You have a body font-size of 100%, so it's the browser standard font-size, for easiness let's say 16px. (Imo you shouldn't convert em to px in your mind, but change you way of thinking to em-based. Just to make you help understand I do convert it in the code below)

For div.contact that means:

div.contact { 
   margin: 1.5em 0; /* 16 x 1.5 = 24px */
   padding: 0 0.7em; /* 16 x 0.7 = 11.2px */
}

For the h2 that means:

h2 {
   font-size: 2em; /* 16 x 2 = 32px */
   margin-bottm:1em; /* 16 x 2 x 1 = 32px */
}

For example, if you change the font-size from .contact to lets say 1.2em this will happen:

div.contact { 
   font-size: 1.5em; /* 16 x 1.2 = 19.2px */
   margin: 1.5em 0; /* 16 x 1.2 x 1.5 = 28.8px */
   padding: 0 0.7em; /* 16 x 1.2 x 0.7 = 13.44px */
}
h2 {
   font-size: 2em; /* 16 x 1.2 x 2 = 38.4px */
   margin-bottm:1em; /* 16 x 1.2 x 2 x 1 = 38.4px */
}

Hope this helps you.

Upvotes: 2

pavel
pavel

Reputation: 27082

In div.contact 1em is from current div's font-size, it this situation it means 100% declared in body.

Another situation:

<style>
    body {font-size: 100%:}
    #wrapper {font-size: 120%;}
    .contact {margin: 1em} /* 1em regarding font-size 120% */
</style>

<div id=wrapper>
    <div class=contact>contact</div>
</div>

Upvotes: 0

Related Questions