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.sstatic.net/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.
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>