为部分内的文章添加特定边距答案

【问题标题】：Adding a specific margin to articles inside a section为部分内的文章添加特定边距
【发布时间】：2017-01-28 06:49:55
【问题描述】：

我正在尝试创建一个包含 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%;}

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

谢谢

【问题讨论】：

你的 HTML 在哪里？

标签： css margin padding

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

【讨论】：

【解决方案2】：

请测试一下：

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

【讨论】：

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

【讨论】：