Question

https://www.opheliajewellery.co.uk/about/

在此页面上，中间的每个div的底部和右侧都有一个边距，顶部和中部之间的尺寸正确，但是底部和中部之间的间隙稍大，

使用检查器后，我似乎找不到原因，这实际上不是空白，只是空白。

它可以在我的本地主机上找到，但是一旦我将代码放入wordpress中，它就会执行此操作。

这里有一些CSS和html。

.ophelia-shortDiv{
    width: 37%;
    margin-bottom: 1%;
    display: inline-block;

}

.ophelia-aboutText{
    margin-top: 15%;
    margin-bottom: 15%;
    margin-left: 10%;
    margin-right: 10%;
}

.ophelia-wideDiv{
    width: 62%;
    margin-bottom: 1%;
    min-height: 345px;
    display: inline-block;
}

.cover{
    background-size: cover;
}

.ophelia-leftDiv{
    float: left;
    margin-right: 1%;
}

.ophelia-color1{
    background-color: #e7e7e7;
}

.ophelia-color2{
    background-color: #c5c6cd;
}

.ophelia-color3{
    background-color: #ced6d8;
}

.ophelia-aboutMain{
    margin-bottom: 5%;
    margin-top: 5%;
}


<div class="ophelia-aboutMain">
    <div class="ophelia-wideDiv ophelia-leftDiv" style="background: url(https://www.opheliajewellery.co.uk/wp/wp-content/uploads/About-ImageOne.jpg) no-repeat; background-size:cover"></div>

    <div class="ophelia-shortDiv ophelia-color1">
        <div class="ophelia-aboutText">
            <p>
                ...
            </p>
            <p> 
                ...
            </p>
        </div>
    </div>

    <div class="ophelia-wideDiv" style="background: url(https://www.opheliajewellery.co.uk/wp/wp-content/uploads/About-ImageOne.jpg) no-repeat; background-size:cover"></div>

    <div class="ophelia-shortDiv ophelia-color1 ophelia-leftDiv">
        <div class="ophelia-aboutText">
            <p>
               ...
            </p>
            <p> 
               ...
            </p>
        </div>
    </div>

    <div class="ophelia-wideDiv ophelia-leftDiv" style="background: url(https://www.opheliajewellery.co.uk/wp/wp-content/uploads/About-ImageThree.jpg) no-repeat; background-size:cover"></div>

    <div class="ophelia-shortDiv ophelia-color3">
        <div class="ophelia-aboutText">
            <p>
               ...
            </p>
            <p> 
               ...
            </p>
        </div>
    </div>
</div>

在div上将“ inline-block”更改为“ inline-flex”可以解决此问题。

下面有一个小提琴来显示问题的例子

Answer 1

您的元素之间的间隙是由您具有的以下CSS规则引起的：

.kleanity-body, .kleanity-body p, .kleanity-line-height, .gdlr-core-line-height {
    line-height: 1.7;
}

您正在将line-height应用于许多不同的元素，包括html的body。

删除此规则，并仅在需要时应用line-height。

Answer 2

我将其放入fiddle中，确实存在边距问题。这与应用于身体的任何样式都没有关系，因为它看起来没有任何其他上下文（尽管那里的更改很可能会产生预期的效果）。

我不确定是什么原因造成的，但是似乎如果删除了上面的图像，问题就消失了，而且中间的图像也有float:right-所以我怀疑这与float:left课程中的ophelia-leftDiv。

即使使用相同的CSS，保证金也会更大

2 个答案: