Jak usunąć przerwy między obrazkami w HTML?

Najczęściej stosowane rozwiązania

1. Wyzerowanie marginesów i paddingu

Najprostsza metoda to nadanie wszystkim obrazkom zerowych marginesów i dopełnień:

img { margin: 0; padding: 0; border: none; display: block; /* o tym za chwilę */ } 

Ta reguła usuwa domyślne marginesy, padding i obramowania z obrazków, które u niektórych przeglądarek mogą domyślnie występować.

2. Zmiana trybu wyświetlania obrazków na „block”

W HTML elementy są domyślnie liniowe (inline), przez co pojawia się między nimi odstęp taki, jak przy spacji w tekście. Warto ustawić display: block;:

img { display: block; } 

Każdy obrazek zacznie zajmować całą szerokość linii i zniknie problem białych odstępów między obrazkami.

Przykład:

<img src="image1.jpg" alt="Obrazek 1"> <img src="image2.jpg" alt="Obrazek 2"> 

Przy powyższym CSS obrazki stykają się idealnie pionowo bez przerw.

3. Usunięcie „białych znaków” z kodu HTML

Przy małej liczbie grafik możesz także usunąć „whitespace” (znaki nowej linii, spacje) pomiędzy znacznikami <img>:

<img src="image1.jpg" alt="Obrazek 1"><img src="image2.jpg" alt="Obrazek 2"> 

Jest to szczególnie widoczne przy pozostawieniu trybu inline. Usuwanie odstępów w ten sposób bywa kłopotliwe przy większych projektach i nie rozwiązuje problemu dziedziczonych stylów, ale może pomóc w prostych przypadkach.

4. Ustawienie font-size rodzica na 0

Jeśli z jakiegoś powodu musisz zachować <img> jako elementy liniowe, można pozbyć się odstępów przez przypisanie font-size: 0 dla kontenera, w którym są obrazki:

.wrapper { font-size: 0; } .wrapper img { font-size: 16px; /* przywrócenie domyślnej wartości dla ewentualnych napisów */ } 

<div class="wrapper"> <img src="image1.jpg" alt="Obrazek 1"> <img src="image2.jpg" alt="Obrazek 2"> </div> 

5. Zapobieganie przerwom przy obrazkach linkowanych lub w innych kontenerach

Często styl dla <img> nie wystarczy, jeśli obrazek jest w <a> lub <figure>. Upewnij się, że także ich style nie dodają marginesów lub paddingu:

a img, figure img { margin: 0; padding: 0; border: none; display: block; } 

lub

a, figure { margin: 0; padding: 0; border: none; } 

6. Usuwanie obramowania wokół obrazków

Niektóre przeglądarki dodają domyślną ramkę wokół linkowanych obrazków. Aby ją wyłączyć, wykorzystaj regułę:

img { border: none; } 

Przykłady zastosowań

Galeria zdjęć wyświetlanych poziomo i pionowo bez odstępów

<div class="galeria"> <img src="foto1.jpg" alt="Zdjęcie 1"> <img src="foto2.jpg" alt="Zdjęcie 2"> <img src="foto3.jpg" alt="Zdjęcie 3"> </div> 

.galeria { display: flex; gap: 0; /* całkowity brak odstępów */ } .galeria img { margin: 0; padding: 0; border: none; display: block; } 

Obrazki w rzędzie (inline-block), usuń białe odstępy

<div class="ikony"> <img src="icon1.png" alt="Ikona 1"> <img src="icon2.png" alt="Ikona 2"> <img src="icon3.png" alt="Ikona 3"> </div> 

.ikony { font-size: 0; white-space: nowrap; } .ikony img { display: inline-block; margin: 0; padding: 0; vertical-align: top; font-size: 16px; /* przywraca rozmiar tekstu jeśli jest wymagany */ } 

Mozaika obrazkowa w siatce CSS grid

<div class="grid-galeria"> <img src="g1.jpg" alt=""> <img src="g2.jpg" alt=""> <img src="g3.jpg" alt=""> <img src="g4.jpg" alt=""> </div> 

.grid-galeria { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; /* brak przerw */ } .grid-galeria img { width: 100%; height: auto; display: block; } 

Podsumowanie

Kluczem do usuwania przerw między obrazkami jest przemyślane wykorzystanie CSS – w szczególności wyzerowanie marginesów, paddingów oraz ustawienie display: block dla zdjęć. W bardziej złożonych sytuacjach mogą pomóc również takie techniki jak układ flex, grid lub manipulacja rozmiarem czcionki rodzica. Zaleca się korzystanie z narzędzi deweloperskich wbudowanych w przeglądarki, aby zidentyfikować, które style generują niepotrzebne przerwy.

Dzięki powyższym technikom stworzysz estetyczne galerie obrazów i przejrzyste układy graficzne na dowolnej stronie internetowej bez niekontrolowanych odstępów między obrazkami.