Jak przesunąć obrazek w dół w HTML?

Aby przesunąć obrazek w dół w HTML, najczęściej wykorzystuje się techniki CSS. Możesz to osiągnąć na kilka różnych sposobów – każdy z nich sprawdzi się w nieco innej sytuacji. Poniżej znajdziesz szczegółowy poradnik z praktycznymi przykładami gotowymi do wykorzystania.

Marginesy CSS (margin)

Najprostszy sposób: dodaj górny margines (z ang. margin-top) do obrazka.

<img src="obrazek.jpg" alt="Opis obrazka" style="margin-top: 50px;"> 

Zastosowanie – idealny sposób, gdy chcesz statycznie przesunąć obrazek o określoną liczbę pikseli w dół względem elementów powyżej.

Przykład z wykorzystaniem klasy w CSS –

<style>
.przesun-w-dol { margin-top: 100px; }
</style>
<img src="obrazek.jpg" class="przesun-w-dol" alt="Przesunięty obrazek">

Pozycjonowanie (position + top)

Możesz użyć właściwości position oraz top, aby precyzyjnie przesunąć obrazek w pionie.

<img src="obrazek.jpg" alt="Opis obrazka" style="position: relative; top: 40px;"> 

• Position: relative – pozwala przesuwać element względem jego pierwotnego położenia;
• Top: 40px – przesuwa obrazek w dół o 40 pikseli.

Gdzie się sprawdzi – gdy potrzebujesz przesuwać element dynamicznie, np. w odpowiedzi na zdarzenia lub w przypadku animacji.

Transformacja CSS (transform – translateY)

Zaawansowany, nowoczesny sposób z użyciem funkcji transform.

<img src="obrazek.jpg" alt="Opis obrazka" style="transform: translateY(60px);"> 

Zalety –

• Pozwala na płynne animacje,
• nie wpływa na przepływ pozostałych elementów — obrazek wizualnie jest przesunięty, ale dalej zajmuje pierwotne miejsce w kodzie.

Przykład z klasą –

<style>
.transform-w-dol { transform: translateY(80px); transition: transform 0.5s; }
</style>
<img src="obrazek.jpg" class="transform-w-dol" alt="Obrazek z animacją przesunięcia">

Wyrównanie w obrębie kontenera (flexbox, padding)

Jeśli chcesz, by obrazek był przesunięty w dół względem górnej krawędzi rodzica:

<style>
.kontener { display: flex; align-items: flex-start; height: 300px; padding-top: 100px; }
</style>
<div class="kontener">
    <img src="obrazek.jpg" alt="Obrazek w kontenerze">
</div>

Sytuacje typowe – kiedy chcesz uzyskać przestrzeń ponad obrazkiem w środku innego elementu.

Przesuwanie obrazka dynamicznie za pomocą JavaScript

Aby przesuwać obrazek po kliknięciu przycisku:

<img id="obrazek" src="obrazek.jpg" alt="Do przesuwania" style="position: relative; top: 0px;">
<button onclick="przesunObrazek()">Przesuń w dół</button>
<script>
function przesunObrazek() {
  const img = document.getElementById('obrazek');
  // Przesuwa o 20px w dół
  img.style.top = (parseInt(img.style.top) + 20) + 'px';
}
</script>

Kiedy używać którego sposobu?

Każda z powyższych metod pozwala przesunąć obrazek w dół – wybierz tę, która najlepiej pasuje do twojego projektu i oczekiwanych efektów wizualnych.