CSS: Как добавить 10 пикселей между изображениями?

Question

Я пытаюсь добавить 10px промежуток между изображениями в галерее на моем сайте. Я использую специальную тему Wordpress со встроенным «построителем страниц», который используется для создания моих портфолио с короткими кодами (не уверен, что это полезная информация!)

В настоящее время изображения находятся в макете сетки с нулевой интервал - см. изображение ниже.

Я хотел бы добавить интервал 10px между каждым изображением, но не на внешних сторонах, поскольку страница является полной шириной - см. Изображение ниже того, как я хотел бы его посмотреть.

Может ли кто-нибудь помочь мне изменить CSS для достижения этого? Я пробовал в течение нескольких дней, но это не соответствует моим основным возможностям CSS.

Любая помощь будет оценена по достоинству!

Вот код CSS в вопросе:

/* \t Gallery 
 
------------------------------------------------*/ 
 
.sr-gallery { 
 
\t margin: 0; 
 
\t padding: 0; 
 
\t list-style: none; 
 
\t width: 100%; 
 
\t overflow: hidden; 
 
} 
 

 
.sr-gallery.gallery-col3 { width: 100.5%; } 
 
\t 
 
.sr-gallery li { 
 
\t margin: 0; 
 
\t padding: 0; 
 
\t float: left; 
 
\t width: 33.33%; 
 
\t overflow: hidden; 
 
\t text-align: center; 
 
} 
 
\t 
 
.gallery-col1 li { width: 100%; } 
 
.gallery-col2 li { width: 50%; } 
 
.gallery-col3 li { width: 33.33%; } 
 
.gallery-col4 li { width: 25%; } 
 
.gallery-col5 li { width: 20%; } 
 
.gallery-col6 li { width: 16.66%; } 
 
\t 
 
.sr-gallery li a { 
 
\t display: inline-block; 
 
\t max-width: 100%; 
 
}

<ul class="sr-gallery gallery-col1"> 
 
    <li><img src="http://chatsingh.com/wp-content/uploads/2016/08/Secret7-003-1.jpg" alt=""></li> 
 
</ul> 
 

 
<ul class="sr-gallery gallery-col2"> 
 
    <li style=" 
 
    border-right: 5px solid #fff; 
 
"><img src="http://chatsingh.com/wp-content/uploads/2016/11/Secret7-007-1100x800.jpg" alt=""></li> 
 
    <li><img src="http://chatsingh.com/wp-content/uploads/2016/08/Secret7-001-1-1100x800.jpg" alt="" style=" 
 
    box-shadow: inset 10px 0 0 0 #fff; 
 
"></li> 
 
</ul> 
 

 
<ul class="sr-gallery gallery-col1"> 
 
    <li><img src="http://chatsingh.com/wp-content/uploads/2016/08/Secret7-004-1.jpg" alt=""></li> 
 
</ul>

Answer 1

Если мы используем box-sizing: border-box;, тогда вы можете просто применить границы к определенным элементам, не нарушая макет.

.sr-gallery li { 
    margin: 0; 
    padding: 0; 
    float: left; 
    width: 33.33%; 
    overflow: hidden; 
    text-align: center; 
    border-bottom: 10px solid white; 
    box-sizing: border-box; 
} 

.gallery-col2 li { 
    width: 50%; 
    border-right: 5px solid white; 
} 

.gallery-col2 li + li { 
    border-left: 5px solid white; 
    border-right: none; 
} 

Answer 2

вы могли бы сделать всю галерею 10px шире экрана и имеют 5px обивка (то есть для двух изображений в строке) ,

В качестве альтернативы вы можете иметь прописку вокруг изображений a, чтобы левые изображения получали относительное положение -5px по горизонтали, а правильные изображения - относительное положение + 5px по горизонтали. Трудная часть будет заключаться в том, чтобы получить дополнение/смещение вправо, так что разделение в центре также будет 10 пикселей.

Answer 3

Я думаю, вы могли бы попробовать это:

.sr-gallery img { 
    padding: 10px; 
} 

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

Answer 4

В вашем случае (основано на вас изображениях), вы можете использовать Flexbox так:

body { 
 
    margin: 0; 
 
} 
 

 
.container { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 

 
.child { 
 
    display: inline-block; 
 
    background: #3794fe; 
 
    flex: 1 1 auto; 
 
    height: 100px; 
 
    margin-bottom: 10px; 
 
} 
 

 
.child.col-1, 
 
.child.col-4 { 
 
    width: 100%; 
 
} 
 

 
.child.col-2 { 
 
    margin-right: 10px; 
 
} 
 

 
.child:last-child { 
 
    margin-bottom: 0; 
 
}

<div class="container"> 
 
    <div class="child col-1"></div> 
 
    <div class="child col-2"></div> 
 
    <div class="child col-3"></div> 
 
    <div class="child col-4"></div> 
 
</div>