Issue
Lets say I have the following code:
<html>
<body>
<header>
<h1>
Hello World
</h1>
</header>
</body>
</html>
body{
// make 1em equivalent to 10px when browser default is 16px
font-size: 62.5%;
}
header{
font-size: 1em;
}
header h1{
font-size: 3em;
margin-bottom: 1em;
}
If the browser's default font-size is 16px, then our h1 will be 30px. I was hoping that the margin below my h1 would be 33% of the font-size but for some reason it is also 30px. Just like the font-size. I clearly specify that it should be 1em.
I understand that em's are relative to the parent container. Are margins relative to the current element? i.e. if font-size of the h1 is set to 4em (40px), then does a 1em margin automatically become 40px too? Is this the expected behaviour? Should I be saying margin-bottom: 0.33em.
Solution
You are correct in assuming that 1em is equal to the current font size. So if we had this:
<header style="font-size:10px;">
<h1 style="font-size:2em; padding:1em;">
Hello World
</h1>
<p style="padding:1em;">
The world is a happy place
</p>
</header>
The padding for h1 would be 20px and the padding for p would be 10px.
If you are new to ems, I just remembered this article that I highly recommend that talks about creating webpages using ems: Fluid Grids
Answered By - cyreb7
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.