为节内的文章添加特定边距

Question

我正在尝试创建一个包含6篇文章的部分，该部分占用了该部分的所有宽度，并且在图像之间留出section { margin: 0 10%; display: flex; flex-wrap: wrap; background: pink; margin-bottom: 50em;} section article { box-shadow: 0em 0.2em 0.2em rgba(0,0,0, 0.3); width: 33.3%;} section article img { width: 100%; height: 100%;} 空间：

在我添加的图片中，我显示了两张图片。第一个是当前的情况，第二个是我想要的。这是我目前使用的CSS代码：

{{1}}

我希望有人知道如何解决我的问题。

由于

Answer 1

试试这个

section {
  margin: 0 10%;
  display: flex;
  flex-wrap: wrap;
  background: pink;
  margin-bottom: 50em;
}

section article {
  box-shadow: 0em 0.2em 0.2em rgba(0, 0, 0, 0.3);
  width: calc(33.3% - 1.2em);
  margin: 0.6em;
  position: relative;
  float: left;
  display: block;
  overflow: hidden;
}
section article img {
  width: 100%;
  height: 100%;
}

<section>
  <article><img src="http://placehold.it/50x50" /></article>
  <article><img src="http://placehold.it/50x50" /></article>
  <article><img src="http://placehold.it/50x50" /></article>
  <article><img src="http://placehold.it/50x50" /></article>
  <article><img src="http://placehold.it/50x50" /></article>
  <article><img src="http://placehold.it/50x50" /></article>
</section>

Answer 2

请测试一下：

section article {
box-shadow: 0em 0.2em 0.2em rgba(0,0,0, 0.3);
width: 30%;
box-sizing:border-box;
margin: 3%;
}

Answer 3

section {
margin: 0;
display: flex;
flex-wrap: wrap;
background: pink;
margin-bottom: 50em;
justify-content: space-between;
}

section article {
box-shadow: 0em 0.2em 0.2em rgba(0,0,0, 0.3);
width: 32%;
  margin: 0 0 2%;
}

section article img {
width: 100%;
height: 100%;}

<section>
  
  <article><img src="http://lorempixel.com/900/300/nightlife/"></article>
  <article><img src="http://lorempixel.com/900/300/nightlife/"></article>
  <article><img src="http://lorempixel.com/900/300/nightlife/"></article>
  
  <article><img src="http://lorempixel.com/900/300/nightlife/"></article>
  <article><img src="http://lorempixel.com/900/300/nightlife/"></article>
  <article><img src="http://lorempixel.com/900/300/nightlife/"></article>
  
</section>