Необъяснимый зазор, возникающий между двумя divs

Question

У меня есть необъяснимый зазор между двумя div s.

Вот образ ситуации:

Это разрыв чуть выше красной div, что я хочу, ушла.

Я хочу, чтобы красный div был red вплоть до того места, где находится изображение. Как я могу это сделать?

Код:

<script type="text/html" id="product-template"> 
    <div class="col-sm-6 col-lg-2 clickable" style="margin-top:20px; padding: 25px;"> 
     <div style="border-radius: 10px; border: 1px solid white;height: 270px;overflow: hidden;"> 
      <div style= "height: 200px; border: 1px solid white; 
         border-top-left-radius: 10px; 
         border-top-right-radius: 10px; 
         color: white; 
         background: center no-repeat; 
         background-image: url(../../the_vegan_repository/product_images/alpro_custard.jpg); 
         background-size:cover;"> 
      </div> 
      <div style="height: 70px; background: red;"> 
       <h6 data-bind="text: product.name" style="color: white"></h6> 
       <h6 data-bind="text: shop.name" style="color: white"></h6> 
       <h6 data-bind="text: shop.suburb" style="color: white"></h6> 
      </div> 
     </div> 
    </div> 
</script> 

Answer 1

у вас есть h6 имеет ребенка вашей нижней div и в начальной загрузки заголовков от h1 к h6 имеют margin-top:10px и margin-bottom:10px «по умолчанию», поэтому вам нужно сбросить, что margin в h6.

Что-то вроде:

h6 { 
    margin-top:0 
}