我不小心在行高值中添加了rem单位，为什么会和边距重叠？

Question

在使用 css 对齐文本时，我不小心将 rem 单位添加到 H3 元素的行高（据我所知，我认为不应该添加），这就是发生的事情。

[也是H3元素本身与H3内容重叠的边距。 ] ()

.step-number {
  font-size: 8.6rem;
  font-weight: 600;
  color: #ddd;
  margin-bottom: 1.2rem;
}

.step-description {
  font-size: 1.8rem;
  line-height: 1.8;
}

.heading-tertiary {
  font-size: 3rem;
  line-height: 1.2rem;
  margin-bottom: 3.2rem;
}

<p class="step-number">01</p>
<h3 class="heading-tertiary">Tell us what you like (and what not)</h3>
<p class="step-description">
Never again waste time thinking about what to eat! Omnifood AI will create a 100% personalized weekly meal plan just for you. It makes sure you get all the nutrients and vitamins you need, no matter what diet you follow!
</p>

我

从 h3 元素中删除 rem 单元后一切正常，但我只想知道这里发生了什么。因为这是我的第一个问题，所以格式可能有误。抱歉。