html - 如何使用 flexbox 为图像留出边距？

Question

我希望图像有边距，所以我写了 justify-content: space-around 但是顶部图像和底部图像之间没有边距。

  
#portfolio {
  background-color: #00C3A9;
  height: 800px;
}
.portfolio_pic {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

<div id="portfolio">  
  <div class="portfolio_pic">
 <img src="http://via.placeholder.com/350x300" alt="">
 <img src="http://via.placeholder.com/350x300" alt="">
 <img src="http://via.placeholder.com/350x300" alt="">
 <img src="http://via.placeholder.com/350x300" alt="">
 <img src="http://via.placeholder.com/350x300" alt="">
 <img src="http://via.placeholder.com/350x300" alt="">
</div>
</div>

截图:

在这种情况下我能做什么？谢谢

Answer 1

你可以尝试像这样给你的图片添加边距

img { margin-top: 15px; }

或者像这样创建一个具有该样式的类，并为每个图像指定该类:

.imagesingrid { margin-top: 15px; }
<img class="imagesingrid" src="http://via.placeholder.com/350x300" alt="">