2つのdivの間に不明なギャップが表示されます

Question

2つのdivの間に原因不明のギャップがあります。ここで

は、状況の画像です：

それはちょうど私がなくなって欲しい赤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の子供を持っており、あなたがそのmarginをリセットする必要があるので、ブートストラップにh1からh6の見出しは、「デフォルトでは」margin-top:10pxとmargin-bottom:10pxを持っていh6。

のような何か：

h6 { 
    margin-top:0 
}