-1

I try to use some images together and float leaves huge white spaces when I try margin-top to make some dent between images.

and by huge white spaces this is what I mean:

image

I also tried clear or overflow but it does`t work.

this is my code:

.product-image-div {
  position: relative;
  width: 25%;
  padding: 0.2%;
  box-sizing: border-box;
  float: left;
}

.product-image {
  transition: .3s ease;
  width: 100%;
}
<div class="product-image-div" style="margin-top: 5%;">
  <img class="product-image" src="https://i.ibb.co/fkSxRCv/p1.png">
</div>
<div class="product-image-div" style="margin-top: 0%;">
  <img class="product-image" src="https://i.ibb.co/fkSxRCv/p1.png">
</div>
<div class="product-image-div" style="margin-top: 5%;">
  <img class="product-image" src="https://i.ibb.co/fkSxRCv/p1.png">
</div>
<div class="product-image-div" style="margin-top: 0%;">
  <img class="product-image" src="https://i.ibb.co/fkSxRCv/p1.png">
</div>
<div class="product-image-div" style="margin-top: 5%;">
  <img class="product-image" src="https://i.ibb.co/fkSxRCv/p1.png">
</div>
<div class="product-image-div" style="margin-top: 0%;">
  <img class="product-image" src="https://i.ibb.co/fkSxRCv/p1.png">
</div>
<div class="product-image-div" style="margin-top: 5%;">
  <img class="product-image" src="https://i.ibb.co/fkSxRCv/p1.png">
</div>
<div class="product-image-div" style="margin-top: 0%;">
  <img class="product-image" src="https://i.ibb.co/fkSxRCv/p1.png">
</div>
<div class="product-image-div" style="margin-top: 5%;">
  <img class="product-image" src="https://i.ibb.co/fkSxRCv/p1.png">
</div>
<div class="product-image-div" style="margin-top: 0%;">
  <img class="product-image" src="https://i.ibb.co/fkSxRCv/p1.png">
</div>
<div class="product-image-div" style="margin-top: 5%;">
  <img class="product-image" src="https://i.ibb.co/fkSxRCv/p1.png">
</div>
<div class="product-image-div" style="margin-top: 0%;">
  <img class="product-image" src="https://i.ibb.co/fkSxRCv/p1.png">
</div>
<div class="product-image-div" style="margin-top: 5%;">
  <img class="product-image" src="https://i.ibb.co/fkSxRCv/p1.png">
</div>
<div class="product-image-div" style="margin-top: 0%;">
  <img class="product-image" src="https://i.ibb.co/fkSxRCv/p1.png">
</div>
<div class="product-image-div" style="margin-top: 5%;">
  <img class="product-image" src="https://i.ibb.co/fkSxRCv/p1.png">
</div>

how to solve this problem?

Nick Parsons
  • 45,728
  • 6
  • 46
  • 64
david
  • 35
  • 5
  • so you repeat the same question with another account: https://stackoverflow.com/questions/60798522/css-float-leave-white-spaces ? – Temani Afif Mar 22 '20 at 12:14

3 Answers3

0

The margin-top you have inlined is your problem. You could hack it and force it to clear? Add clear:left. 

.product-image-div:nth-child(4n+1){
  clear:left;
}

Read more on nth-child awesomeness.

https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child

David
  • 801
  • 8
  • 19
-1

I think, that you need to use fix height and 'overflow:hidden' for your div's. 

.product-image-div {
  position: relative;
  width: 25%;
  height: 10vh; //for example
  padding: 0.2%;
  box-sizing: border-box;
  float: left;
}
Repa
  • 1
  • 1
-1

It's because those block height is different. Try this css and remove margin-top: 5% from div style

.product-image-div:nth-child(2n+1) {
    margin-top: 5%;
}
.product-image-div:nth-child(2n) {
    margin-bottom: 5%;
}
rangerz
  • 595
  • 3
  • 9