需要删除div底部的额外空间

Question

我的图片中的图片后面出现了空格（下面代码片段中的红色区域）。包含更多内容的绿色div应该直到图像的底部。

我的目标是用隐藏的内容填充绿色div，当我点击图像时，它会显示更多信息。

＆＃13;

＆＃13;

.pp-post {
  color: #ffffff;
  background-color: red;
	margin: 0 auto;
  padding: 0px;
	max-width: 100%;
	position: relative;
}

.pp-post-item:hover > p {
	visibility: visible;
}

.pp-post-title {  
  font-size: 3em !important;
  font-family: Sanchez;
  position: absolute;
  visibility: hidden;
  top: 40%;
  left: 50%;  
  transform: translate(-50%, -50%);
}

.pp-arrow-down {  
  font-size: 2em !important;
  position: absolute;
  visibility: hidden;
  top: 60%;
  left: 50%;  
  transform: translate(-50%, -50%);
}

.pp-post-container {
  background-color:green;
}

.pp-post-main {
  margin: 0px;
  padding: 0px;
}

.pp-post-content {
  width: 70%;
  margin: auto;  
}

.pp-post-video {

}

.pp-post-left, .pp-post-right {
  display: inline-block;
  margin: 0px;
  width: 45%;
}

.pp-post-testimonials {
  background-color: #fff;
}

＆＃13;

<div class="pp-post">
     <div class="pp-post-item">
        <img src=" http://www.staging1.prosperopictures.com/wp-content/uploads/2017/08/a-dangerous-method-banner.jpg" />
        <p class="pp-post-title">Movie Title</p>
        <p class="pp-arrow-down">subtitle</p>
	</div>
</div>
<div id="pp-post" class="pp-post-container">
  <div id="pp-post-main" class="pp-post-main">
    <div id="pp-post-content" class="pp-post-content">
      <div id="pp-post-video" class="pp-post-video"></div>
      <div id="pp-post-left" class="pp-post-left">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </div>
      <div id="pp-post-right" class="pp-post-right">
        <div></div>
        <div></div>
      </div>
    </div>
  </div>   
  <div id="pp-post-testimonials" class="pp-post-testimonials">  </div>
</div>

＆＃13;

＆＃13;

＆＃13;