How to reduce the distance between divas? so it was like in the picture? enter image description here

.col-4{ width: 25%; float: left; margin: 0; } 
 <section class="section-second"> <div> <h2 style="text-align: center;">Photo</h2> </div> <div class="row"> <div class="col-4"> <img src="https://placeimg.com/150/150/people"> </div> <div class="col-4"> <img src="https://placeimg.com/150/150/people"> </div> <div class="col-4"> <img src="https://placeimg.com/150/150/people"> </div> <div class="col-4"> <img src="https://placeimg.com/150/150/people"> </div> </div> <div class="row-2"></div> <div class="col-4"> <img src="https://placeimg.com/150/150/people"> </div> <div class="col-4"> <img src="https://placeimg.com/150/150/people"> </div> <div class="col-4"> <img src="https://placeimg.com/150/150/people"> </div> <div class="col-4"> <img src="https://placeimg.com/150/150/people"> </div> <div class="col-4"> <img src="https://placeimg.com/150/150/people"> </div> <div class="col-4"> <img src="https://placeimg.com/150/150/people"> </div> <div class="col-4"> <img src="https://placeimg.com/150/150/people"> </div> <div class="col-4"> <img src="https://placeimg.com/150/150/people"> </div> <div class="col-4"> <img src="https://placeimg.com/150/150/people"> </div> <div class="col-4"> <img src="https://placeimg.com/150/150/people"> </div> <div class="col-4"> <img src="https://placeimg.com/150/150/people"> </div> <div class="col-4"> <img src="https://placeimg.com/150/150/people"> </div> </div> </section>

  • It seems to me this question was asked many times on the forums, including here. Remove the curb (it defaults to 1) and that's it. Check out the margin and padding. - nick_n_a
  • one
    You have a syntax error: You immediately closed row-2 - Yuri

1 answer 1

.col-4 add:

  • padding: 10px; - thus indents will be regulated
  • box-sizing: border-box; - so we will set another block model so that the width and height does not increase due to the added padding

.col-4 img add:

  • max-width: 100%; - so that the picture does not climb outside the block
  • display: block; - so that it becomes a block.

 .col-4 { width: 25%; float: left; padding: 10px; box-sizing: border-box; } .col-4 img { max-width: 100%; display: block; } 
 <section class="section-second"> <div> <h2 style="text-align: center;">Photo</h2> </div> <div class="row"> <div class="col-4"> <img src="https://placeimg.com/150/150/people"> </div> <div class="col-4"> <img src="https://placeimg.com/150/150/people"> </div> <div class="col-4"> <img src="https://placeimg.com/150/150/people"> </div> <div class="col-4"> <img src="https://placeimg.com/150/150/people"> </div> </div> <div class="row-2"></div> <div class="col-4"> <img src="https://placeimg.com/150/150/people"> </div> <div class="col-4"> <img src="https://placeimg.com/150/150/people"> </div> <div class="col-4"> <img src="https://placeimg.com/150/150/people"> </div> <div class="col-4"> <img src="https://placeimg.com/150/150/people"> </div> <div class="col-4"> <img src="https://placeimg.com/150/150/people"> </div> <div class="col-4"> <img src="https://placeimg.com/150/150/people"> </div> <div class="col-4"> <img src="https://placeimg.com/150/150/people"> </div> <div class="col-4"> <img src="https://placeimg.com/150/150/people"> </div> <div class="col-4"> <img src="https://placeimg.com/150/150/people"> </div> <div class="col-4"> <img src="https://placeimg.com/150/150/people"> </div> <div class="col-4"> <img src="https://placeimg.com/150/150/people"> </div> <div class="col-4"> <img src="https://placeimg.com/150/150/people"> </div> </div> </section>