Cfrgtkky

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

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.

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.