Почему у меня не работают отступы для картинок в теге div или figure

Question

Html:

* {
  padding: 0;
  margin: 0;
}

header {
  background-color: #B41F1F;
  width: 100vw;
  height: 14.8vw;
}

.header__messenger {
  justify-content: center;
}

<header>
  <div class="header__messenger">
    <img src="images (2).png" alt="tg">
    <img src="WhatsApp.svg.png" alt="watsapp">
    <img src="images (3).png" alt="vk">
  </div>
</header>

Answer 1

У вас не заданы отступы. Поэтому и не работают. Сделайте хотя бы так.

.header__messenger {
  display: flex; /* Это чтобы работало это -> justify-content: center; */
  justify-content: center;
  gap: 45px; /*- а это отступы*/
}

Answer 2

для выравнивания по вертикали (по центру) необходимо добавить align-items: center; и задать минимальную высоту для .header__messenger

* {
  padding: 0;
  margin: 0;
}

header {
  background-color: #B41F1F;
  width: 100vw;
  height: 14.8vw;
}

.header__messenger {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 45px;
  width: 100%;
  min-height: 100%;
  &>img{ 
    border: 1px solid blue
    }
}

<header>
  <div class="header__messenger">
    <img src="images (2).png" alt="tg">
    <img src="WhatsApp.svg.png" alt="watsapp">
    <img src="images (3).png" alt="vk">
  </div>
</header>

БЛОГ НА HUSL

Почему у меня не работают отступы для картинок в теге div или figure

Ответы (2 шт):