CSS：如何在图像之间添加 10px？答案

【问题标题】：CSS: How to add 10px between images?CSS：如何在图像之间添加 10px？
【发布时间】：2020-06-24 20:02:56
【问题描述】：

我正在尝试在我网站上的图库中的图片之间添加 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>

【问题讨论】：

不要发布简码，发布 html 输出。

标签： html css spacing

【解决方案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>

【讨论】：

【解决方案2】：

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

【讨论】：

几乎？缺少什么？
对不起，我在完成消息之前按了回车键。我已经编辑了我的原始回复。
更新了我的答案。请注意，为了保持布局正常流动，我将 10px 的一半作为 2 个元素的边框。因此，如果您更改 10，请将 5px 的也更改为一半。
更新后的代码很有效。谢谢 Serg - 非常感谢您的帮助！

【解决方案3】：

您可以使整个画廊比屏幕宽 10 像素，并具有 5 像素的内边距（即连续两个图像）。

或者，您可能在图像周围有一个填充，左侧图像接收水平方向 -5px 的相对位置，右侧图像接收水平方向 +5px 的相对位置。棘手的部分是正确设置填充/偏移，以便中心的间距也为 10 像素。

【讨论】：

【解决方案4】：

我想，你可以试试这个：

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

由于您没有发布实际的工作示例，我不能说它是否有效。

【讨论】：