Question

当尝试使用em值与px定位（内联块）段落时，我遇到了一个奇怪的问题。

我将段落（“组织名称”）定位为上边距为20px，左边距为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">
				<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：

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作为边距。< / p>

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

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

1 个答案: