I accidently added rem unit to line-height value, It overlaps the margin why?

Question

While aligning the text using css, I accidently added rem unit to line-height (I think it shouldn't be added as of my knowledge)of the H3 element and this what happened.

margin of the above P element comes in contact with h3 element below.

[also the margin of H3 element itself overlapping with H3 content. ] (https://i.stack.imgur.com/lUzqf.png)

.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>

I

After Removing the rem unit from the h3 element everthing works fine, but I just want to know what happens here. As this is my 1st question it may be in wrong format sorry for that.

Answer 1

The font-size for h3 is 3rem but the line-height is 1.2rem. Whenever font-size is greater than the line-height, the text is bound to overlap. So removing or reducing the line-height property will solve it.

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