CODEWITHSUNDEEP
htmlcssimagepadding
s0mething001
s0mething001

Reputation: 19

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

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>

Upvotes: 0

Views: 52

Answers (1)

Bqardi
Bqardi

Reputation: 691

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>

Upvotes: 1

Related Questions