Dlaczego między elementami inline-block pojawia się przerwa?

Typowe błędy pojawiają się przy łączeniu metod. Ustawienie font-size: 0 na kontenerze, a potem dodanie odstępu marginesem, daje podwójny efekt i rozjazd o kilka pikseli. Podobnie bywa z inline-block i vertical-align — domyślna wartość baseline potrafi dodać niewidoczny odstęp pod elementem, który wygląda jak biały znak, ale nim nie jest. Warto sprawdzić oba źródła, zanim zacznie się szukać winy w szerokościach.

Powielanie obrazu do wielkiego formatu najczęściej kończy się rozczarowaniem, bo ludzie nie rozróżniają dwóch zupełnie różnych sposobów zapisu grafiki. Obraz rastrowy to siatka pikseli o ustalonej liczbie kolumn i wierszy. Obraz wektorowy to zbiór punktów, linii i krzywych opisanych matematycznie, przeliczanych na piksele dopiero w chwili wyświetlania lub druku. Ta różnica decyduje o tym, co się stanie, gdy powiększysz plik dziesięciokrotnie.

Siatka kart zwykle zaczyna się od pytania: ile kolumn na jakim ekranie? Potem pojawiają się media query dla trzech, czterech, pięciu szerokości, a i tak przy dziwnej szerokości okna coś się rozjeżdża. Można to rozwiązać inaczej — za pomocą trzech właściwości CSS: repeat(), minmax() i auto-fill. Kontener sam decyduje, ile kart zmieści się w wierszu, a ty nie piszesz ani jednego zapytania o media.

rgb() i rgba() zapisują kanały dziesiętnie, od 0 do 255. Nowoczesny zapis rgb() przyjmuje też wartości procentowe i kanał alfa po ukośniku: rgb(30 144 255 / 0.5). To wygodne, gdy przezroczystość zmienia się dynamicznie, np. w stanie hover. Typowy błąd to mieszanie starych i nowych składni: rgb(30, 144, 255, 0.5) z przecinkami i czwartą wartością nie zadziała w każdej przeglądarce. Przy przecinkach alfa wymaga osobnej funkcji rgba(), przy zapisie bez przecinków — ukośnika.

Selektor klasy wskazuje element przez wartość atrybutu class. Jedna klasa może wystąpić na wielu elementach, a jeden element może mieć kilka klas oddzielonych spacjami. To czyni klasę podstawowym narzędziem do stylowania komponentów wielokrotnego użytku: przycisków, kart, komunikatów. Identyfikator działa inaczej — w poprawnym dokumencie występuje tylko raz, więc nadaje się do wskazania unikalnego fragmentu, na przykład głównego kontenera strony czy konkretnego pola formularza, do którego prowadzi odnośnik wewnętrzny.

Pamiętaj też, że auto-fill i auto-fit nie tworzą siatki responsywnej same z siebie — reagują na szerokość kontenera, nie okna. Jeśli kontener jest zagnieżdżony w kolumnie innego gridu, to on wyznacza dostępne miejsce. Warto wtedy dodać min-width: 0 na rodzicu, żeby element mógł się kurczyć. Dzięki temu ten sam mechanizm sprawdzi się w wąskim panelu bocznym i na pełnym ekranie, bez pisania osobnych reguł.

Praktyczna zasada jest prosta. Jeśli obiekt da się opisać kształtem, użyj wektora. Jeśli istotna jest fotograficzna faktura, użyj rastra o rozdzielczości policzonej pod docelowy format. Wektoryzacja automatyczna ze zdjęcia rzadko daje dobry wynik — powstaje plik z tysiącami przypadkowych kształtów, który wygląda gorzej niż oryginał. Lepiej narysować uproszczoną wersję ręcznie albo ograniczyć się do dużego rastra. Zanim cokolwiek powiększysz, sprawdź, czym jest plik i jakie ma wymiary, bo od tego zależy cały efekt końcowy.

Skąd dokładnie bierze się ta przerwa? Mechanizm jest prosty: parser HTML zamienia ciągi białych znaków na pojedynczą spację, a następnie wstawia ją do drzewa dokumentu jako węzeł tekstowy. Przy elementach blokowych ten węzeł nie ma znaczenia, bo i tak nie są one ustawiane w linii. Przy inline-block spacja staje się pełnoprawnym znakiem w linii tekstu i zajmuje miejsce. Im większa czcionka w kontenerze, tym większa przerwa — dlatego problem bywa bardziej widoczny na dużych ekranach lub przy większym font-size.

Na co uważać? Po pierwsze, nie mieszaj technik — jeśli używasz font-size: 0, pamiętaj o przywróceniu rozmiaru tekstu w środku, inaczej zniknie cała typografia. Po drugie, nie licz na to, że przeglądarki same zignorują spację; różnice między silnikami renderującymi wciąż istnieją. Po trzecie, testuj układ przy różnych rozmiarach czcionek i powiększeniu strony, bo przerwa rośnie proporcjonalnie. Najzdrowszym nawykiem jest jednak stopniowe odchodzenie od inline-block na rzecz flexboxa lub gridu — wtedy problem przestaje istnieć, zamiast być maskowany kolejnymi hackami.

Typowy błąd polega na powiększaniu w programie graficznym z włączoną interpolacją i uznaniu, że problem zniknął. Powiększenie wygląda lepiej na ekranie, ale w druku nadal brakuje danych. Drugi częsty błąd to skalowanie w dół i z powrotem w górę — każda taka operacja trwale usuwa szczegóły. Trzeci: zapis do formatu stratnego po każdym powiększeniu, co dokłada kolejne artefakty. Przy rasterze pracuj na kopii, nigdy na pliku źródłowym, i sprawdzaj efekt w docelowym rozmiarze, a nie w widoku dopasowanym do okna.