Question

嗨我有两个简单的标题，一个h3在h2之上。出于一些奇怪的原因，虽然在h2标题的左侧似乎有1px的间隙。它让我发疯，我只是不知道为什么。 h2的字体大小为40px，其中h3的字体大小为12px。

有人可以让我摆脱困境吗

谢谢

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

可能是字体重量和尺寸过大尝试减少字体重量和尺寸

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

HTML标题对齐问题

2 个答案: