Убрать пустоты рядом с изображениями

148

18 декабря 2020, 09:50

img {vertical-align:top}

<img src="https://www.codeproject.com/KB/GDI-plus/ImageProcessing2/img.jpg" width="50" height="60"> 
<img src="https://www.codeproject.com/KB/GDI-plus/ImageProcessing2/img.jpg" width="15" height="60"> 
<img src="https://www.codeproject.com/KB/GDI-plus/ImageProcessing2/img.jpg" width="57" height="80"> 
<img src="https://www.codeproject.com/KB/GDI-plus/ImageProcessing2/img.jpg" width="44" height="54"> 
<img src="https://www.codeproject.com/KB/GDI-plus/ImageProcessing2/img.jpg" width="78" height="57"> 
<img src="https://www.codeproject.com/KB/GDI-plus/ImageProcessing2/img.jpg" width="32" height="75"> 
<img src="https://www.codeproject.com/KB/GDI-plus/ImageProcessing2/img.jpg" width="32" height="75"> 
<img src="https://www.codeproject.com/KB/GDI-plus/ImageProcessing2/img.jpg" width="22" height="77"> 
<img src="https://www.codeproject.com/KB/GDI-plus/ImageProcessing2/img.jpg" width="75" height="22"> 
<img src="https://www.codeproject.com/KB/GDI-plus/ImageProcessing2/img.jpg" width="55" height="77"><img src="https://www.codeproject.com/KB/GDI-plus/ImageProcessing2/img.jpg" width="50" height="60"> 
<img src="https://www.codeproject.com/KB/GDI-plus/ImageProcessing2/img.jpg" width="15" height="60"> 
<img src="https://www.codeproject.com/KB/GDI-plus/ImageProcessing2/img.jpg" width="57" height="80"> 
<img src="https://www.codeproject.com/KB/GDI-plus/ImageProcessing2/img.jpg" width="44" height="54"> 
<img src="https://www.codeproject.com/KB/GDI-plus/ImageProcessing2/img.jpg" width="78" height="57"> 
<img src="https://www.codeproject.com/KB/GDI-plus/ImageProcessing2/img.jpg" width="32" height="75"> 
<img src="https://www.codeproject.com/KB/GDI-plus/ImageProcessing2/img.jpg" width="32" height="75"> 
<img src="https://www.codeproject.com/KB/GDI-plus/ImageProcessing2/img.jpg" width="22" height="77"> 
<img src="https://www.codeproject.com/KB/GDI-plus/ImageProcessing2/img.jpg" width="75" height="22"> 
<img src="https://www.codeproject.com/KB/GDI-plus/ImageProcessing2/img.jpg" width="55" height="77"><img src="https://www.codeproject.com/KB/GDI-plus/ImageProcessing2/img.jpg" width="50" height="60"> 
<img src="https://www.codeproject.com/KB/GDI-plus/ImageProcessing2/img.jpg" width="15" height="60"> 
<img src="https://www.codeproject.com/KB/GDI-plus/ImageProcessing2/img.jpg" width="57" height="80"> 
<img src="https://www.codeproject.com/KB/GDI-plus/ImageProcessing2/img.jpg" width="44" height="54"> 
<img src="https://www.codeproject.com/KB/GDI-plus/ImageProcessing2/img.jpg" width="78" height="57"> 
<img src="https://www.codeproject.com/KB/GDI-plus/ImageProcessing2/img.jpg" width="32" height="75"> 
<img src="https://www.codeproject.com/KB/GDI-plus/ImageProcessing2/img.jpg" width="32" height="75"> 
<img src="https://www.codeproject.com/KB/GDI-plus/ImageProcessing2/img.jpg" width="22" height="77"> 
<img src="https://www.codeproject.com/KB/GDI-plus/ImageProcessing2/img.jpg" width="75" height="22"> 
<img src="https://www.codeproject.com/KB/GDI-plus/ImageProcessing2/img.jpg" width="55" height="77">

Как избавится от этих пустот выделенных красным цветом?

Answer 1

Ну наверно так... В мелких flex выставлено выравнивание сверху вниз (column), а общий блок mama берет внутренние блоки flex, и в свою очередь выдает им display: flex - гоирзонатльное выравнивание.

.flex {display: flex; flex-direction: column;} 
.mama {display: flex;} 
 
img {margin: 4px;}

<div class="mama"> 
  <div class="flex"> 
    <img src="https://www.codeproject.com/KB/GDI-plus/ImageProcessing2/img.jpg" width="50" height="60"> 
    <img src="https://www.codeproject.com/KB/GDI-plus/ImageProcessing2/img.jpg" width="50" height="60"> 
    <img src="https://www.codeproject.com/KB/GDI-plus/ImageProcessing2/img.jpg" width="50" height="60"> 
  </div> 
  <div class="flex"> 
    <img src="https://www.codeproject.com/KB/GDI-plus/ImageProcessing2/img.jpg" width="57" height="80"> 
    <img src="https://www.codeproject.com/KB/GDI-plus/ImageProcessing2/img.jpg" width="57" height="80"> 
    <img src="https://www.codeproject.com/KB/GDI-plus/ImageProcessing2/img.jpg" width="57" height="80"> 
  </div> 
  <div class="flex"> 
    <img src="https://www.codeproject.com/KB/GDI-plus/ImageProcessing2/img.jpg" width="44" height="54"> 
    <img src="https://www.codeproject.com/KB/GDI-plus/ImageProcessing2/img.jpg" width="44" height="54"> 
    <img src="https://www.codeproject.com/KB/GDI-plus/ImageProcessing2/img.jpg" width="44" height="54"> 
  </div> 
  <div class="flex"> 
    <img src="https://www.codeproject.com/KB/GDI-plus/ImageProcessing2/img.jpg" width="78" height="57"> 
    <img src="https://www.codeproject.com/KB/GDI-plus/ImageProcessing2/img.jpg" width="78" height="57"> 
    <img src="https://www.codeproject.com/KB/GDI-plus/ImageProcessing2/img.jpg" width="78" height="57"> 
  </div> 
  <div class="flex"> 
    <img src="https://www.codeproject.com/KB/GDI-plus/ImageProcessing2/img.jpg" width="32" height="75"> 
    <img src="https://www.codeproject.com/KB/GDI-plus/ImageProcessing2/img.jpg" width="32" height="75"> 
    <img src="https://www.codeproject.com/KB/GDI-plus/ImageProcessing2/img.jpg" width="32" height="75"> 
  </div> 
  <div class="flex"> 
    <img src="https://www.codeproject.com/KB/GDI-plus/ImageProcessing2/img.jpg" width="32" height="75"> 
    <img src="https://www.codeproject.com/KB/GDI-plus/ImageProcessing2/img.jpg" width="32" height="75"> 
    <img src="https://www.codeproject.com/KB/GDI-plus/ImageProcessing2/img.jpg" width="32" height="75"> 
  </div> 
  <div class="flex"> 
    <img src="https://www.codeproject.com/KB/GDI-plus/ImageProcessing2/img.jpg" width="22" height="77"> 
    <img src="https://www.codeproject.com/KB/GDI-plus/ImageProcessing2/img.jpg" width="22" height="77"> 
    <img src="https://www.codeproject.com/KB/GDI-plus/ImageProcessing2/img.jpg" width="22" height="77"> 
  </div> 
  <div class="flex"> 
    <img src="https://www.codeproject.com/KB/GDI-plus/ImageProcessing2/img.jpg" width="75" height="22"> 
    <img src="https://www.codeproject.com/KB/GDI-plus/ImageProcessing2/img.jpg" width="75" height="22"> 
    <img src="https://www.codeproject.com/KB/GDI-plus/ImageProcessing2/img.jpg" width="75" height="22"> 
  </div> 
  <div class="flex"> 
    <img src="https://www.codeproject.com/KB/GDI-plus/ImageProcessing2/img.jpg" width="55" height="77"> 
    <img src="https://www.codeproject.com/KB/GDI-plus/ImageProcessing2/img.jpg" width="55" height="77"> 
    <img src="https://www.codeproject.com/KB/GDI-plus/ImageProcessing2/img.jpg" width="55" height="77"> 
  </div> 
</div>