how can I remove small gap vertically - html

Question

If I remove the space between the block code it only removes a small gap horizontally,
but vertically it's still has a small gap i know i can use flexbox instead but, I'm trying to understand why it behaves like this, any idea why it still has a small gap? vertically it can be removed with font size set to 0 but there is no text or letter below the image
/* Video Wrapper */
.video-wrapper {
background-color: royalblue;
width: 60%;
margin: 15px auto 15px auto;
box-sizing: border-box;
}
.video-wrapper > h2 {
text-indent: 150px;
background-color: lightblue;
margin: 0px;
height: 50px;
line-height: 50px;
}
.video-content {
display: inline-block;
background-color: red;
width: 40%;
position: relative;
height: 400px;
box-sizing: border-box;
}
iframe {
width: 100%;
outline: 0;
position: absolute;
height: 100%;
box-sizing: border-box;
}
.video-wrapper > p {
display: inline-block;
width: 50%;
box-sizing: border-box;
vertical-align: top;
}
No Space Removed:
<section class="video-wrapper" id="video-section">
<h2>Video</h2>
<div class="video-content"></div>
<p>Carefully Haa Lorem ipsum dolor sit amet consectetur, adipisicing elit. Non perspiciatis veritatis veniam hic dignissimos! Et quas magnam doloremque, sapiente quae error ut repellendus esse aspernatur doloribus mollitia sunt iste cupiditate quisquam, aliquam dolorem labore dolore nobis repellat consectetur vel, nulla harum alias incidunt. Odit, dolorem. Maiores maxime quidem quis odit?</p>
</section>
Space Removed :
<section class="video-wrapper" id="video-section"><h2>Video</h2><div class="video-content"></div><p>Carefully Haa Lorem ipsum dolor sit amet consectetur, adipisicing elit. Non perspiciatis veritatis veniam hic dignissimos! Et quas magnam doloremque, sapiente quae error ut repellendus esse aspernatur doloribus mollitia sunt iste cupiditate quisquam, aliquam dolorem labore dolore nobis repellat consectetur vel, nulla harum alias incidunt. Odit, dolorem. Maiores maxime quidem quis odit?</p></section>

Answer 1

By reducing the margin-Bottom you can hide or remove the gap
to do that CSS will be
.video-content {
display: inline-block;
background-color: red;
width: 40%;
position: relative;
margin-bottom: -4px;
height: 400px;
box-sizing: border-box;
}

Answer 2

Yes, as answered #Jvs there is a way like to reduce margin-botttom and
there is more one way is reducing height of parent tag/class
in your case CSS :
.video-wrapper {
background-color: royalblue;
width: 60%;
margin: 15px auto 15px auto;
box-sizing: border-box;
height: 450px;
}
Try this one also :p