html - CSS:如何在图像之间添加 10px？

Question

我正在尝试在我网站上的图库中的图像之间添加 10 像素的间距。我正在使用带有集成“页面构建器”的 Wordpress 自定义主题，它用于创建带有短代码的投资组合帖子(不确定这是否有用!)

目前，图像采用零间距的网格布局 - 请参见下图。

我想在每张图片之间添加 10 像素的间距，但不在外侧添加，因为页面是全宽的 - 请参见下图了解我希望它的外观。

有谁能帮我修改 CSS 来实现这个目标吗？我已经尝试了好几天，但这超出了我最基本的 CSS 能力。

任何帮助将不胜感激!

这是有问题的 CSS 代码:

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

.sr-gallery.gallery-col3 { width: 100.5%; }
	
.sr-gallery li {
	margin: 0;
	padding: 0;
	float: left;
	width: 33.33%;
	overflow: hidden;
	text-align: center;
}
	
.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%;  }
	
.sr-gallery li a  {
	display: inline-block;
	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

在您的情况下(基于您的图像)，您可以像这样使用 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>