Beniamino_Baggins Beniamino_Baggins - 7 months ago 10
HTML Question

Unexplained gap appearing between two divs

I have an unexplained gap appearing between two

div
s.

Here is an image of the situation:

enter image description here

It is the gap just above the red
div
that I want gone.

I want the red
div
to be
red
all the way to where the image is. How can I do 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>


Here is me hovering over the two
div
s in the developer console:

enter image description here

enter image description here

Answer

you have a h6 has child of your bottom div and in bootstrap the headings from h1 to h6 have margin-top:10px and margin-bottom:10px "by default" so you need to reset that margin in h6.

Something like:

h6 {
  margin-top:0
}
Comments