Px to Em conversion incorrect when positioning paragraph? - css

Question

I'm experiencing an odd issue when trying to position a (inline-block) paragraph using em values vs. px.
Body font size = 16px = 1em
I positioned the paragraph ("Organization Name") to have a top margin of 20px and left margin of 10px:
body {
font-size: 16px;
width: 60em;
border: 1px solid black;
}
#topHeader {
min-height: 4.69em;
margin-top: .31em;
border-bottom: 1px solid black;
}
#topHeader img {
float: left;
height: 70px;
width: 100px;
margin-left: .63em;
}
#headerTitle {
display: inline-block;
font-size: 2em;
margin: 20px 0px 0px 10px;
}
#topUserLinks {
display: inline;
float: right;
}
#topUserLinks a {
display: inline-block;
margin-right: 10px;
}
#topNav {
padding-left: 400px;
margin-top: 5px;
}
#topNav a + a{
margin-left: 30px;
}
<header id="topHeader">
<img src="" alt="Organization Image Here">
<p id="headerTitle">Organization Name</p>
<div id="topUserLinks">
Sign Up
Login
</div>
<nav id="topNav">
Link 1
Link 2
Link 3
Link 4
Link 5
</nav>
</header>
I then converted the paragraph positioning to the em equivalent of 1.25em top and .63em left:
body {
font-size: 16px;
width: 60em;
border: 1px solid black;
}
#topHeader {
min-height: 4.69em;
margin-top: .31em;
border-bottom: 1px solid black;
}
#topHeader img {
float: left;
height: 70px;
width: 100px;
margin-left: .63em;
}
#headerTitle {
display: inline-block;
font-size: 2em;
margin: 1.25em 0em 0em .63em;
}
#topUserLinks {
display: inline;
float: right;
}
#topUserLinks a {
display: inline-block;
margin-right: 10px;
}
#topNav {
padding-left: 400px;
margin-top: 5px;
}
#topNav a + a{
margin-left: 30px;
}
<header id="topHeader">
<img src="" alt="Organization Image Here">
<p id="headerTitle">Organization Name</p>
<div id="topUserLinks">
Sign Up
Login
</div>
<nav id="topNav">
Link 1
Link 2
Link 3
Link 4
Link 5
</nav>
</header>
Obviously I expected the positioning of the paragraph to remain the same. As you can see in the above snippet, it's margins seemed to double!
I can easily correct this by just reducing the em values, but I really want to understand why this happened in the first place.
My conversions from px to em are correct ((20/16=1.25)(10/16=.63)), so I am struggling to understand this issue. Any advice or insights you could offer would be appreciated!

Answer 1

You #headerTitle paragraph is set to a font size of 2em, so that's the measure of your em margins. (I.e. 1em is now around 32px for that element.) Forget about matching px with em in this way, though. If you want your em margins based on the root document's em setting, set the font size of the html element to 16px or 1em and then use rem instead of em for the margins.
(As an aside, the organisation name there isn't really a paragraph. I'd either use a heading element or just a div as a container.)