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

Question

Все мои фотографии должны соответствовать следующим критериям:

1). При использовании компьютера или мобильного телефона для просмотра в одной строке должны отображаться 4 элемента без функции RWD. 2) Независимо от того, какие размеры по высоте и ширине, вся внешняя рамка должна быть идентична, я потратил несколько дней на такую ​​настройку, но обнаружил, что расстояние от изображения до изображения (https://drive.google.com/file/d/1fsUN5ms1U4hfSoXl-oNcvEiwBwfVNpoZ/view?usp=sharing) отличается, пожалуйста, посоветуйте, как чтобы все интервалы между изображениями были одинаковыми.

Другой вопрос, как контролировать межстрочный интервал? Если я наберу xxx, высота пространства каждой строки будет слишком широкой, нужно уменьшить высоту, я все еще не могу решить с помощью настройки, может ли кто-нибудь протянуть руку помощи? Я очень признателен. [Проблема] [1] URL веб-сайта

<table class="table table-borderless" style="margin:0px 0px;" cellpadding="3">
    <tr>
    <td>
    <div id="container"><img style="border:1px #000 solid;padding:5px;text-align:center;" src="content/images/demo/001.jpg"></div>
    <p class="text-center">xxx</p>
    </td>
    <td>
    <div id="container"><img style="border:1px #000 solid;padding:5px;text-align:center;" src="content/images/demo/002.jpg"></div>
    <p class="text-center">xxx</p>
    </td>
    <td>
    <div id="container" style="border:1px #000 solid;padding:5px;text-align:center;"><img src="content/images/demo/003.jpg"></div>
    <p class="text-center">xxx</p>                              
    </td>
    <td>
    <div id="container" style="border:1px #000 solid;padding:5px;text-align:center;"><img src="content/images/demo/004.jpg"></div>
    <p class="text-center">xxx</p>                              
    </td>                           
    </tr>
    <tr>
    <td>
    <div style="border:1px #000 solid;padding:5px;text-align:center;"><img src="content/images/demo/005.jpg"></div>
    <p class="text-center">xxx</p>                              
    </td>
    <td>
    <div style="border:1px #000 solid;padding:5px;text-align:center;"><img src="content/images/demo/006.jpg"></div>
    <p class="text-center">xxx</p>                              
    </td>
    <td>
    <div style="border:1px #000 solid;padding:5px;text-align:center;"><img src="content/images/demo/007.jpg"></div>
    <p class="text-center">xxx</p>                              
    </td>
    <td>
    <div style="border:1px #000 solid;padding:5px;text-align:center;"><img src="content/images/demo/008.jpg"></div>
    <p class="text-center">xxx</p>                              
    </td>                           
    </tr>                           
    <tr>
    <td>
    <div style="border:1px #000 solid;padding:5px;text-align:center;"><img src="content/images/demo/009.jpg"></div>
    <p class="text-center">xxx</p>                              
    </td>
    <td>
    <div style="border:1px #000 solid;padding:5px;text-align:center;"><img src="content/images/demo/010.jpg"></div>
    <p class="text-center">xxx</p>                              
    </td>                           
    </tr>                               
    </table>

Answer 1

Вы не должны использовать table. Вы должны использовать макет сетки. Здесь - отличное руководство.

EDIT:

Это работает для вас?

.grid-container {
  display: grid;
  /* Use % instead of px for it to be proportionnal to the frame width */
  grid-template-columns: 20% 20% 20% 20%;
  grid-gap: 15px;
  padding: 0px;
}

.grid-item {
  background-color: lightgreen;
}

.grid-item>img{
  /* make it so the image take up the whole grid-item width */
  width: 100%;
}

<div class="grid-container">
  <div class="grid-item">
    <img src="https://via.placeholder.com/250" />
    <span class="author-span">AUTHOR_name</span>
  </div>
  <div class="grid-item">
    <img src="https://via.placeholder.com/250" />
    <span class="author-span">AUTHOR_name</span>
  </div>
  <div class="grid-item">
    <img src="https://via.placeholder.com/250" />
    <span class="author-span">AUTHOR_name</span>
  </div>
  <div class="grid-item">
    <img src="https://via.placeholder.com/250" />
    <span class="author-span">AUTHOR_name</span>
  </div>
  <div class="">
    IMAGE
    <span class="author-span">AUTHOR_name</span>
  </div>
  <div class="grid-item">
    <img src="https://via.placeholder.com/250" />
    <span class="author-span">AUTHOR_name</span>
  </div>
  <div class="grid-item">
    <img src="https://via.placeholder.com/250" />
    <span class="author-span">AUTHOR_name</span>
  </div>
  <div class="grid-item">
    <img src="https://via.placeholder.com/250" />
    <span class="author-span">AUTHOR_name</span>
  </div>
  <div class="grid-item">
    <img src="https://via.placeholder.com/250" />
    <span class="author-span">AUTHOR_name</span>
  </div>
  <div class="grid-item">
    <img src="https://via.placeholder.com/250" />
    <span class="author-span">AUTHOR_name</span>
  </div>
  <div class="grid-item">
    <img src="https://via.placeholder.com/250" />
    <span class="author-span">AUTHOR_name</span>
  </div>
</div>