html - Unexplained gap appearing between two divs -
i have unexplained gap appearing between 2 divs.
here image of situation:
it gap above red div want gone.
i want red div red way image is. how can that?
code:
<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>
you have h6 has child of bottom div , in bootstrap headings h1 h6 have margin-top:10px , margin-bottom:10px "by default" need reset margin in h6.
something like:
h6 { margin-top:0 } 
Comments
Post a Comment