I'm encountering an issue with the spacing between two rows/elements in an HTML template. I'm working on creating a product grid for our restaurant and used a template sourced from the Internet. As shown in this picture: issue1
The problem lies in the spacing between the first line and second line elements when adding a new row of text. Whenever I add a new row using the p element, the entire 2nd row seems to drop down significantly, causing unwanted space.
Here is the HTML code I'm using (issue version vs. non-issue version)
<div class="col-12 col-sm-6 col-lg-4">
<div class="single-best-receipe-area mb-30">
<img src="https://www.coopathome.ch/img/produkte/880_880/RGB/4798850_001.jpg?_=1527527264626" width=290px height=304px alt="" class="center-block" />
<div class="receipe-content">
<h5 style="line-height: 0px;">Barilla - Penne Rigate fără gluten 400g</h5> <p style="color:#ff9400; text-decoration: line-through;" >14,00 RON</p> <p style="color:#ff9400; line-height: 0px;"> REDUCERE 10% - 12,00 RON</p>
</div>
</div>
</div>
<!-- Single Best Receipe Area -->
<div class="col-12 col-sm-6 col-lg-4">
<div class="single-best-receipe-area mb-30" >
<img src="https://www.coopathome.ch/img/produkte/880_880/RGB/4798854_001.jpg?_=1505902808944" width=320px height=304px alt="" class="center-block" />
<div class="receipe-content">
<a href="receipe-post.html">
<h5>Barilla - Spaghetti fără gluten 400g</h5>
</a>
</div>
</div>
</div>
Below is the custom CSS that has been added:
.single-best-receipe-area .receipe-content {
padding-top: 30px;
text-align: center;
}
.mb-30 {
vertical-align: middle;
margin: 0 auto;
}
.receipe-content {
line-height: 0px;
}
Despite trying the suggestions from StackOverflow, such as using line-height: 0px, I haven't had any success. Unfortunately, I am not a web developer and simply attempting to create a menu list for our restaurant. Any help would be greatly appreciated. Thank you!
EDIT: Demo with code:
EDIT2: A more detailed image of the issue can be found here: issue2