How can i create a padding between images in splited div? - html

Question

I split my container and put an image in each of them but when I add padding: 0 25px its not creating space between images. So is there any way to put 25px padding between photos/divs?
I tried to put margin and paddings in both html and CSS
* {
box-sizing: border-box;
}
.col-1-3 {
width: 33.333%;
float: left;
padding: 0 25px;
}
.test {
margin: 0 auto;
width: 1700px;
border: 1px solid red;
}
.clearfix:after,
.clearfix:before {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
<div class="test clearfix">
<div class="col-1-3">
<img src="https://picsum.photos/560" alt="">
</div>
<div class="col-1-3">
<img src="https://picsum.photos/560" alt="">
</div>
<div class="col-1-3">
<img src="https://picsum.photos/560" alt="">
</div>
</div>

Answer 1

The float/clearfix hack shouldn't be used anymore. Use flex or grid to make your layout more "up to date".
Here is a solution with grid that creates a 25px gap between images:
* {
box-sizing: border-box;
}
.col-1-3 img {
display: block;
width: 100%;
}
.test {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 25px;
margin: 0 auto;
width: 1700px;
}
<div class="test">
<div class="col-1-3">
<img src="https://picsum.photos/500" alt="">
</div>
<div class="col-1-3">
<img src="https://picsum.photos/500" alt="">
</div>
<div class="col-1-3">
<img src="https://picsum.photos/500" alt="">
</div>
</div>