gpt4 book ai didi

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

转载 作者:搜寻专家 更新时间:2023-10-31 22:37:34 25 4
gpt4 key购买 nike

我希望图像有边距,所以我写了 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>

截图:

enter image description here

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

最佳答案

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

img { margin-top: 15px; }

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

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

关于html - 如何使用 flexbox 为图像留出边距?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45649303/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com