logo标签列表

给H1和H2标签添加margin-left

htmlcss
3

我之前似乎从未遇到这个问题，但为什么当我特别为H1和H2元素应用margin-left时，它们的左侧不能对齐呢？

以下是有问题的代码：

* {
  margin: 0;
  padding: 0;
}

div h1,
h2 {
  margin-left: 1em;
}
<div>
   <h1>Inspector Clouseau</h1>
   <h2>Reporting for duty</h2>
</div>

但是当我在div标记中应用margin-left时，它们与我预期的完美对齐？

以下是可工作的代码：

* {
  margin: 0;
  padding: 0;
}

div {
  margin-left: 1em;
}
<div>
    <h1>Inspector Clouseau</h1>
    <h2>Reporting for duty</h2>
</div>

我不理解为什么会发生这种情况。

2
在第一个例子中，您使用了“div h1，h2 {...}” - 您需要使用“div h1，div h2 {...}”。 - fen1x
4
这是因为h1和h2元素具有不同的默认字体大小。你使用1em来测量填充。1em = 当前字体大小。因此，h1获得了34px的左填充，而h2仅获得了24px。 - I haz kode
你想让标签的字体大小不同吗？ - Maulik
4个回答
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标签的字体大小输出不同，因此通过在百分比中设置边距将会得到所需的输出结果。

3
Em 值可能是最难理解的值，可能是因为它们的概念是抽象和任意的。这是关键： 1em 等于元素中当前的 font-size 。如果在页面上没有设置字体大小，则会使用浏览器默认值，通常为 16px。所以默认情况下，1em = 16px。如果您在 body 上设置了 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 会以这种方式影响它们。 - user4853150
@Synthz 很荣幸。 - kyun
2

和

在IT技术中有不同的字体大小属性(例如在Chrome浏览器中，h1为2em，而h2为1.5em)，当你给它们设置margin-left为1em时，会得到不同的像素值。

* {
  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>

2
您的CSS没有问题，但您在CSS中使用了em单位，这是一个简单的问题。 em单位是相对于元素的字体大小的（2em表示当前字体大小的两倍）。这就是为什么h1和h2的字体大小不同，因此em会使它们之间的间距不同。尝试使用h3标签查看结果。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接