html - 两个 div 之间出现无法解释的间隙

Question

我在两个 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 的 child ，在 Bootstrap 中，标题从 h1 到 h6具有 margin-top:10px 和 margin-bottom:10px “默认”，因此您需要在 h6< 中重置 margin/.

类似于:

h6 {
  margin-top:0
}