我对html有点陌生，我该如何对图像进行空间划分

Question

屏幕截图：https://i.ibb.co/NN1kF97/Screenshot-20210417-005957.png

不确定如何将图像隔开我对html tbh 有点陌生

<section class="section--primary--light text--center">
<div class="container">
<h3>GitHub repositories used to make this possible/credit :) </h3>
<a href="https://github.com/martymcmodding/qUINT/tree/master/Shaders">
<img align="center" src="https://github-readme-stats.vercel.app/api/pin/?username=martymcmodding&repo=qUINT&theme=dark"/>
</a>
<a href="https://github.com/crosire/reshade-shaders/tree/master/Shaders">
<img align="center" src="https://github-readme-stats.vercel.app/api/pin/?username=crosire&repo=reshade-shaders&theme=dark"/>
</a>
<a href="https://github.com/prod80/prod80-ReShade-Repository">
<img align="center" src="https://github-readme-stats.vercel.app/api/pin/?username=prod80&repo=prod80-ReShade-Repository&theme=dark"/>
</a>
<a href="https://github.com/prod80/prod80-ReShade-Repository">
<img align="center" src="https://github-readme-stats.vercel.app/api/pin/?username=prod80&repo=prod80-ReShade-Repository&theme=dark"/>
</a>
</div>
</section>

Answer 1

使用margin属性来分隔元素。

正如@AlexanderNied所提到的，填充在您的情况下也很有用。

a {
margin: 10px;
}

<section class="section--primary--light text--center">
<div class="container">
<h3>GitHub repositories used to make this possible/credit :) </h3>
<a href="https://github.com/martymcmodding/qUINT/tree/master/Shaders">
<img align="center" src="https://github-readme-stats.vercel.app/api/pin/?username=martymcmodding&repo=qUINT&theme=dark"/>
</a>
<a href="https://github.com/crosire/reshade-shaders/tree/master/Shaders">
<img align="center" src="https://github-readme-stats.vercel.app/api/pin/?username=crosire&repo=reshade-shaders&theme=dark"/>
</a>
<a href="https://github.com/prod80/prod80-ReShade-Repository">
<img align="center" src="https://github-readme-stats.vercel.app/api/pin/?username=prod80&repo=prod80-ReShade-Repository&theme=dark"/>
</a>
<a href="https://github.com/prod80/prod80-ReShade-Repository">
<img align="center" src="https://github-readme-stats.vercel.app/api/pin/?username=prod80&repo=prod80-ReShade-Repository&theme=dark"/>
</a>
</div>
</section>

Answer 2

您有margin添加间距。对于margin，还有margin-left、margin-right等，如果您希望将间距设置为所附加的元素(在本例中为img(的顶部、左侧、右侧或底部。

我还在container类中添加了flex，因此每行有两个元素。如果你想让它看起来像你链接的图像。

img {
width: 100%
}
.container {
display: flex;
flex-wrap: wrap;
}
.container > a {
flex: 50%; /* or - flex: 0 50% - or - flex-basis: 50% - */
/*demo*/
margin-bottom: 10px;
}

<section class="section--primary--light text--center">
<div class="container">
<h3>GitHub repositories used to make this possible/credit :) </h3>
<a href="https://github.com/martymcmodding/qUINT/tree/master/Shaders">
<img align="center" src="https://github-readme-stats.vercel.app/api/pin/?username=martymcmodding&repo=qUINT&theme=dark"/>
</a>
<a href="https://github.com/crosire/reshade-shaders/tree/master/Shaders">
<img align="center" src="https://github-readme-stats.vercel.app/api/pin/?username=crosire&repo=reshade-shaders&theme=dark"/>
</a>
<a href="https://github.com/prod80/prod80-ReShade-Repository">
<img align="center" src="https://github-readme-stats.vercel.app/api/pin/?username=prod80&repo=prod80-ReShade-Repository&theme=dark"/>
</a>
<a href="https://github.com/prod80/prod80-ReShade-Repository">
<img align="center" src="https://github-readme-stats.vercel.app/api/pin/?username=prod80&repo=prod80-ReShade-Repository&theme=dark"/>
</a>
</div>
</section>

<a href="https://github.com/crosire/reshade-shaders/tree/master/Shaders">
<img align="center" src="https://github-readme-stats.vercel.app/api/pin/?username=crosire&repo=reshade-shaders&theme=dark"/>
</a>
<a href="https://github.com/prod80/prod80-ReShade-Repository">
<img align="center" src="https://github-readme-stats.vercel.app/api/pin/?username=prod80&repo=prod80-ReShade-Repository&theme=dark"/>
</a>
<a href="https://github.com/prod80/prod80-ReShade-Repository">
<img align="center" src="https://github-readme-stats.vercel.app/api/pin/?username=prod80&repo=prod80-ReShade-Repository&theme=dark"/>
</a>