Margin bigger even though same css is being used

Question

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

On this page there's a margin on the bottom and right of each div in the middle, The top and middle have the right size between eachother but the bottom and middle has a slightly larger gap,

After using the inspector I can't seem to find the cause, It's not actually a margin, it's just white space.

It works find on my localhost, but as soon as I put the code into wordpress it does this.

Here's some of the css and the 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>

Changing 'inline-block' to 'inline-flex' on the divs fixed the problem.

There is a fiddle below to show an example of the problem

Please create a [mcve] in the question itself - this site is meant to be a repository for future visitors, once you fix your error on the site, the link will be no use and future visitors cannot see the original problem — Pete, Nov 21 '18 at 16:04
Check your markup and make sure there's no spaces in between those two elements. If that's not an option use something other than `display: inline-block` — I haz kode, Nov 21 '18 at 16:13
Possible duplicate of [How do I remove the space between inline-block elements?](https://stackoverflow.com/questions/5078239/how-do-i-remove-the-space-between-inline-block-elements) — Yandy_Viera, Nov 21 '18 at 16:21
he is not talking about the margin between inline-block elements. it's not a duplicate. he means the margin between rows. You could have just checked his link before flagging the question as duplicate. — Alvaro Menéndez, Nov 21 '18 at 16:30
It is a duplicate. `line-height` is not the answer. Change them to `inline-flex` and you'll see that `line-height` does not remove the space completely... just makes it smaller due to smaller `line-height`. — I haz kode, Nov 21 '18 at 16:36

score 0 · Answer 1 · answered Nov 21 '18 at 16:27

Your gap between your elements is caused by this css rule you have:

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

Your are applying line-height to many different elements including the body of your html.

remove this rule and apply the line-height only where you need it.

score 0 · Answer 2 · answered Nov 21 '18 at 16:41

I put this into a fiddle, and indeed the margin issue is there. This has nothing to do with any styles applied to body, since it appears without any other context (though changes there might well have the desired effect).

I am not sure what is causing this, but it seems that if the image above is removed, the issue disappears, and also if the middle image has float:right - so I suspect this is something to do with the float:left in your ophelia-leftDiv class.

Margin bigger even though same css is being used

2 Answers2