Reducing gap between heading and paragraph [duplicate] - css

Question

This question already has answers here:
What are the default margins for the html heading tags (<h1>, <h2>, <h3>, etc.)?
(4 answers)
What is the default padding and/or margin for a p element (reset css)?
(5 answers)
Closed 2 years ago.
I've coded a blog website which is functioning absolutely fine and doing what I want it to - I'd say I'm about average with CSS, but for the life of me I can't figure out why there's a huge gap between my blog title and summary / date posted below it. I want them to essentially have no margin or gap between them, but obviously not be overflowing.
However, whenever I set the margin to 0, it doesn't reduce the gap. I've tried playing with sizes, but on the whole I want to keep them auto height sized where possible for mobile responsiveness, and reducing code.
Here's an example:
h1 {
font-size: 8rem;
letter-spacing: 0.5px;
color: #ff4766;
}
h2 {
font-size: 3rem;
letter-spacing: 0.5px;
color: ##ff4766;
}
h3 {
font-size: 2rem;
letter-spacing: 0.5px;
color: #ff4766;
}
h4 {
color: #fff;
}
p {
font-size: 1rem;
letter-spacing: 0.5px;
color: #fff;
}
a {
font-size: 0.8rem;
letter-spacing: 0.5px;
text-decoration: none;
color: #fff;
}
body {
margin: 0;
padding: 0;
font-family: 'Helvetica', sans-serif;
box-sizing: border-box;
background-color: #3b353a;
}
.homepage-blog-section {
height: auto;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.homepage-blog-container {
height: 90%;
width: 90%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.homepage-blog-post {
height: auto;
width: 50%;
display: flex;
align-items: center;
flex-direction: column;
margin: 40px 0;
}
.homepage-blog-title {
height: auto;
width: 100%;
}
.homepage-blog-details {
height: auto;
width: 100%;
}
.homepage-blog-details p {
color: #f9f9f9;
font-style: italic;
font-weight: 200;
font-size: 0.8rem;
}
<section class="homepage-blog-section">
<div class="homepage-blog-container">
<div class="homepage-blog-post">
<div class="homepage-blog-title">
<a href="">
<h3>
Show
</h3>
</a>
</div>
<div class="homepage-blog-details">
<p>
Test summary
</p>
<p>
Test date
</p>
</div>
</div>
</div>
</section>
As you can see when you run that code there's a big gap between the title and the summary/date below it. I've considered putting them into the same div, but to be honest I don't massively want to do that - and it doesn't work exactly how I was hoping.
I'm wanting there to be a similar gap between the title and summary, as there is with the summary and date. I've tried minus margins but that breaks down eventually on smaller devices - and like I said, hoping to keep this code as clean as possible without it being too fiddly.
Is there something obvious I'm missing??