Галерея

https://webref.ru/course/block-inline/inline-block

by fersterin

HTML

<figure class="photo">
   <img src="//webref.ru/example/image/thumb1.jpg">
   <figcaption>Софийский собор</figcaption>
  </figure>
  <figure class="photo">
   <img src="//webref.ru/example/image/thumb2.jpg">
   <figcaption>Польский костёл</figcaption>
  </figure>
  <figure class="photo">
   <img src="//webref.ru/example/image/thumb3.jpg">
   <figcaption>Купеческий клуб</figcaption>
  </figure>
  <figure class="photo">
   <img src="//webref.ru/example/image/thumb4.jpg">
   <figcaption>Памятник Св.&nbsp;Владимиру</figcaption>
  </figure>

CSS

.photo {
    background: #d9dabb; /* Цвет фона */
    width: 150px; /* Ширина */
    margin: 0 10px 10px 0; /* Отступы справа и снизу */
    padding: 10px 0; /* Поля сверху и снизу */
    text-align: center; /* Выравнивание по центру */
    display: inline-block; /* Строчно-блочный элемент */
    vertical-align: top; /* Выравнивание по верхнему краю */
   }
   .photo img {
    border: 2px solid #8b8e4b; /* Параметры рамки */
   }