Как опустить картинку вниз CSS

Существует несколько способов опустить картинку вниз с помощью CSS:

1. Использовать свойство position и bottom:

img {
  position: relative;
  bottom: 20px; /* количество пикселей, на которое нужно опустить изображение */
}

2. Использовать отступ снизу с помощью свойства margin-bottom:

img {
  margin-bottom: 20px; /* количество пикселей, на которое нужно опустить изображение */
}

3. Использовать transform:

img {
  transform: translateY(20px); /* количество пикселей, на которое нужно опустить изображение */
}

Важно понимать, что эти способы могут повлиять на расположение других элементов на странице. Чтобы избежать этого, оберните картинку внутри контейнера и примените эти свойства к контейнеру, а не к самой картинке:

<div class="image-container">
  <img src="path/to/image.jpg">
</div>

.image-container {
  position: relative;
  bottom: 20px; /* или margin-bottom: 20px; или transform: translateY(20px); */
}

Таким образом, только контейнер с картинкой будет опущен вниз, не затрагивая другие элементы на странице.