向 H1 和 H2 标签添加 margin-left答案

【问题标题】：Adding margin-left to H1 and H2 tags向 H1 和 H2 标签添加 margin-left
【发布时间】：2022-01-26 23:41:41
【问题描述】：

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

问题代码如下：

* {
  margin: 0;
  padding: 0;
}

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

<div>
   <h1>Inspector Clouseau</h1>
   <h2>Reporting for duty</h2>
</div>

但是当我将 margin-left 应用到 div 标签时，它们会像我预期的那样完美对齐？

这是工作代码：

* {
  margin: 0;
  padding: 0;
}

div {
  margin-left: 1em;
}

<div>
    <h1>Inspector Clouseau</h1>
    <h2>Reporting for duty</h2>
</div>

我不明白为什么会这样。

【问题讨论】：

在第一个例子中你使用了div h1, h2 {...} - 你需要div h1, div h2 {...}
这是因为h1 和h2 元素具有不同的默认字体大小。您使用 1em 来测量填充。 1em = 当前字体大小。所以h1 得到34px 左填充，而h2 只得到24px
你想要两个标签的字体大小应该不同...？

标签： html css

【解决方案1】：

*{
	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标签的字体大小输出不同的原因，所以通过在%中设置margin会给出期望的输出，

【讨论】：

【解决方案2】：

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;
}

【讨论】：

这很有趣，我不知道使用 em 会以这种方式影响他们。
@Synthz 这是我的荣幸。

【解决方案3】：

h1 和 h2 具有不同的 font-size 属性（例如，在 Chrome 中，h1 和 1.5em 的 h2 为 2em）并且当您将 margin-left 指定为1em 它对h1 和h2 计算出不同的像素值。

* {
  margin: 0;
  padding: 0;
}

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

div.second {
  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>
    <br/>
    <div class="second">
      <h1>Inspector Clouseau</h1>
      <h2>Reporting for duty</h2>
    </div>
  </header>
  <main>
  </main>
  <footer>
  </footer>
</body>

</html>

【讨论】：

【解决方案4】：

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

em 单位是什么？它是如何工作的，请查看下面的答案。

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

这意味着h1 和h2 字体大小不同，因此它们使空间不同。尝试输入h3 检查结果。

【讨论】：