css - 定位段落时Px到Em转换不正确？

Question

尝试使用 em 值与 px 定位(行内 block )段落时，我遇到了一个奇怪的问题。

• 正文字体大小 = 16px = 1em

我将段落(“组织名称”)定位为上边距为 20 像素，左边距为 10 像素:

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">
				<a href="" id="topSignUp">Sign Up</a>
				<a href="" id="topLogin">Login</a>

			</div>
			<nav id="topNav">
				<a href="">Link 1</a>
				<a href="">Link 2</a>
				<a href="">Link 3</a>
				<a href="">Link 4</a>
				<a href="">Link 5</a>
			</nav>
</header>

然后我将段落定位转换为相当于 1.25em top 和 .63em left 的 em:

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">
				<a href="" id="topSignUp">Sign Up</a>
				<a href="" id="topLogin">Login</a>

			</div>
			<nav id="topNav">
				<a href="">Link 1</a>
				<a href="">Link 2</a>
				<a href="">Link 3</a>
				<a href="">Link 4</a>
				<a href="">Link 5</a>
			</nav>
</header>

显然，我希望段落的位置保持不变。正如您在上面的代码片段中看到的，它的利润率似乎翻了一番!

我可以通过减少 em 值轻松纠正这个问题，但我真的想首先了解为什么会发生这种情况。

我从 px 到 em 的转换是正确的 ((20/16=1.25)(10/16=.63))，所以我很难理解这个问题。如果您能提供任何建议或见解，我们将不胜感激!

Answer 1

您的 #headerTitle 段落设置为 2em 的字体大小，因此这是您的 em 边距的度量。 (即 1em 现在是该元素的 32px 左右。)忘记以这种方式将 px 与 em 匹配吧。如果您希望 em 边距基于根文档的 em 设置，请将 html 元素的字体大小设置为 16px 或 1em，然后使用 rem 而不是 em 作为边距.

(顺便说一句，那里的组织名称并不是真正的段落。我要么使用标题元素，要么只使用 div 作为容器。)