即使使用相同的 css，保证金也会更大答案

【问题标题】：Margin bigger even though same css is being used即使使用相同的 css，保证金也会更大
【发布时间】：2019-04-24 06:04:20
【问题描述】：

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

在这个页面中间每个div的底部和右侧都有一个margin，顶部和中间之间的大小合适，但底部和中间的间隙稍大，

使用检查器后我似乎无法找到原因，它实际上不是一个边距，它只是一个空白。

它可以在我的本地主机上找到，但只要我将代码放入 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' 解决了这个问题。

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

【问题讨论】：

请在问题本身中创建一个minimal reproducible example - 本网站旨在成为未来访问者的存储库，一旦您在网站上修复了您的错误，该链接将无效，未来的访问者也不能查看原始问题
检查您的标记并确保这两个元素之间没有空格。如果这不是一个选项，请使用 display: inline-block 以外的其他内容
How do I remove the space between inline-block elements?的可能重复
他不是在谈论 inline-block 元素之间的边距。它不是重复的。他的意思是行之间的边距。您可以在将问题标记为重复之前检查他的链接。
它是重复的。 line-height 不是答案。将它们更改为inline-flex，您会看到line-height 并没有完全删除空间...只是因为更小的line-height 而使其更小。

标签： html css wordpress margin

【解决方案1】：

我把它放到fiddle 中，确实存在边距问题。这与应用于 body 的任何样式无关，因为它在没有任何其他上下文的情况下出现（尽管那里的更改很可能会产生预期的效果）。

我不确定是什么原因造成的，但似乎如果上面的图像被删除，问题就会消失，而且如果中间图像有float:right - 所以我怀疑这与@987654323有关@ 在你的 ophelia-leftDiv 类中。

【讨论】：

【解决方案2】：

您的元素之间的差距是由您拥有的这条 css 规则造成的：

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

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

删除此规则并仅在您需要的地方应用line-height。

【讨论】：