CSS: 如何在图片之间添加10px？

Question

我正在尝试在我网站上的图库中的图像之间添加 10 像素的间距。我正在使用带有集成 'page builder' 的 Wordpress 自定义主题，它被用来创建我的短代码投资组合帖子（不确定这是否有用的信息！）

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

我想在每张图片之间添加一个 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>

Answer 1

您可以使整个画廊比屏幕宽 10 像素，并有 5 像素的填充（即连续两张图片）。

或者，您可以在图像周围填充一个填充，使左侧图像的水平相对位置为 -5 像素，右侧图像的水平相对位置为 +5 像素。棘手的部分是让 padding/offset 正确，以便中心的分隔也将是 10px。

Answer 2

我想，你可以试试这个：

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

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

Answer 3

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

CSS: 如何在图片之间添加10px？

CSS: How to add 10px between images?

html

css

spacing