如果我移除块代码之间的空隙，它只移除了一个小的横向空隙，但它仍然有一个小的纵向空隙，我知道我可以用flexbox代替，但是，我试图理解它为什么会这样，知道它为什么仍然有一个小的空隙吗？在垂直方向上，可以将字体大小设置为0，但图像下方没有文本或字母

/* 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>

null