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

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

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

我想在每张图片之间添加10px的间距，但不要在外侧添加10px的间距，因为页面是全宽度的-请参见下面的图片，以查看它的外观。

有谁能够帮助我修改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>

最佳答案

如果使用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;
}