Question

我以前似乎从来没有遇到过这个问题，但是为什么当我专门向它们应用margin-left时，H1和H2元素在左边是否均匀对齐？

以下是问题代码：

* {
  margin: 0;
  padding: 0;
}

div h1,
h2 {
  margin-left: 1em;
}

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <link href="css/style.css" rel="stylesheet" type="text/css">
</head>

<body>
  <header>
    <div>
      <h1>Inspector Clouseau</h1>
      <h2>Reporting for duty</h2>
    </div>
  </header>
  <main>
  </main>
  <footer>
  </footer>
</body>

</html>

但是当我将margin-left应用于div标签时，它们完全按照我的预期进行对齐？

以下是工作代码：

* {
  margin: 0;
  padding: 0;
}

div {
  margin-left: 1em;
}

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <link href="css/style.css" rel="stylesheet" type="text/css">
</head>

<body>
  <header>
    <div>
      <h1>Inspector Clouseau</h1>
      <h2>Reporting for duty</h2>
    </div>
  </header>
  <main>
  </main>
  <footer>
  </footer>
</body>

</html>

我不明白为什么会这样。

Answer 1

h1和h2在Chrome中具有不同的 font-size 属性（h1的2em和1.5em的{{1}}实例）当您将h2作为1em时，它会评估margin-left和h1的像素中的不同值。

h2

* {
  margin: 0;
  padding: 0;
}

div:not(.second) h1, div:not(.second) h2 {
  margin-left: 1em;
}

div.second {
  margin-left: 1em;
}

Answer 2

您的申请css中没有任何问题，但其简单的事情是您在css中使用em单位。

什么是em单位？工作原理如下所示。

“相对于元素的字体大小（2em表示当前字体的大小的2倍）”

这意味着h1和h2字体大小不同，因此em会使空间不同。尝试将h3检查结果。

Answer 3

Em值可能是包围ol'noodle的最困难的值，可能是因为它们的概念是抽象的和任意的。这是独家新闻：1em等于所讨论元素的当前font-size。如果您没有在页面上的任何位置设置字体大小，那么它将是浏览器默认值，可能是16px。因此，默认情况下1em = 16px。如果您要在身上设置20px的字体大小，那么1em = 20px。

https://css-tricks.com/css-font-size/

在您的代码中，

h1和h2有不同的字体大小。

当你编写像这样的代码时

h1, h2{
  margin-left: 1em;
}

这意味着

h1{
  margin-left: 40px;
}
h2{
  margin-left: 30px;
}

Answer 4

*{
	margin: 0;
	padding: 0;
}
div h1,h2{
	margin-left:3%;
}

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<link href="css/style.css" rel="stylesheet" type="text/css">
	</head>
	<body>
		<header>
			<div>
			<h1>Inspector Clouseau</h1>
			<h2>Reporting for duty</h2>
			</div>
		</header>
		<main>
		</main>
		<footer>
		</footer>
	</body>
</html>

而不是使用em，您可以使用适当的“％”。 h1和h2标签的字体大小输出的原因是不同的，所以通过设置％的余量将给出欲望输出，

向H1和H2标签添加margin-left

4 个答案: