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

Question

我正在尝试创建一个包含 6 篇文章的部分，该部分占用该部分的所有宽度并且图像之间有 1.2em 空间:

在我添加的图片中，我显示了两张图片。第一个是现状，第二个是我想要的。这是我目前正在使用的 CSS 代码:

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%;}

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

谢谢

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>