Маржа больше, хотя используется тот же CSS - PullRequest
Новая
       8

Маржа больше, хотя используется тот же CSS

0 голосов
/ 21 ноября 2018

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

На этой странице есть поле снизу и справа от каждого делителя в середине. Верх и середина имеют правильный размер между друг другом, но дно и середина имеют немного больший зазор,

После использования инспектора я не могу найти причину, на самом деле это не поле, это просто пробел.

Работает поиск на моем локальном хосте, но как только яположить код в 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>

Изменение 'inline-block' на 'inline-flex' на divs исправилпроблема.

Ниже приведена скрипка, показывающая пример проблемы

Ответы [ 2 ]

0 голосов
/ 21 ноября 2018

Я положил это в скрипку , и, действительно, проблема маржи есть.Это не имеет никакого отношения к любым стилям, применяемым к телу, поскольку оно появляется без какого-либо другого контекста (хотя изменения там вполне могут иметь желаемый эффект).

Я не уверен, что является причиной этого, но кажется, чтоЕсли изображение выше удаляется, проблема исчезает, а также если среднее изображение имеет float:right - поэтому я подозреваю, что это как-то связано с float:left в вашем классе ophelia-leftDiv.

0 голосов
/ 21 ноября 2018

Ваш разрыв между вашими элементами вызван этим правилом css: 

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

Вы применяете line-height ко многим различным элементам, включая body вашего html.

удалите это правило и применяйте line-height только там, где вам нужно.

...