HTML 标题对齐问题

Question

您好，我有 2 个简单的标题，一个 h3 在一个 h2 之上。出于某种奇怪的原因，虽然 h2 标题左侧似乎有 1px 的间隙。这让我发疯，我只是不明白为什么会这样。 h2的字体大小是40px，而h3的字体大小是12px。

谁能帮我摆脱困境

谢谢

body {
  padding: 0;
  margin:0;
}
.section-heading-small {
  font-size: 12px;
  letter-spacing: 5px;
  color: #a3a3a3;
  font-weight: 500;
  margin: 0;
}

.section-heading-main {
  font-family: sans-serif;
  font-size: 40px;
  letter-spacing: -1px;
  margin: 0;
  text-transform: uppercase;
font-weight: 700;

}

       <h3 class="section-heading-small">Small Heading</h3>
              <h2 class="section-heading-main">Large Heading</h2>

Answer 1

这不是问题。字体采用矢量间距设计，但您可以根据需要使用margin-left:-3px; 或text-indent:-2px; 显示它

body {
  padding: 0;
  margin:0;
}
.section-heading-small {
  font-size: 12px;
  letter-spacing: 5px;
  color: #a3a3a3;
  font-weight: 500;
  margin: 0;
}
.section-heading-main {
  font-family: sans-serif;
  font-size: 40px;
  letter-spacing: -1px;
  margin: 0 0 0 -3px;
  text-transform: uppercase;
  font-weight: 700;
}

<h3 class="section-heading-small">Small Heading</h3>
<h2 class="section-heading-main">Large Heading</h2>

Answer 2

可能是字体粗细和字号太大，尝试减小字体粗细和大小

Font-size: 20px; 
Font-weight: 500;