Как убрать расстояние между картинками?

419

14 января 2017, 11:24

Как уменьшить расстояние между дивами? чтоб было, как на картинке?

.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>

Answer 1

.col-4 добавить:

padding: 10px; - таким образом будут регулироваться отступы
box-sizing: border-box; - так мы зададим другую блочную модель, чтобы ширина и высота не увеличивалась за счет добавленного padding

.col-4 img добавить:

max-width: 100%; - чтобы картинка не вылазила за пределы блока
display: 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>