Czy wiesz, że display block, inline i inline-block decydują o układzie strony?
Nagłówek, który nie zjeżdża z ekranu podczas przewijania, robi się na dwa sposoby: przez position: fixed albo position: sticky. Wybór nie jest obojętny, bo oba zachowują się inaczej w układzie strony i inaczej kosztują przeglądarkę. Fixed wyrywa element z normalnego przepływu dokumentu i przypina go do okna widoku. Sticky najpierw zachowuje się jak zwykły element, a po przekroczeniu progu przewijania przykleja się w obrębie swojego kontenera nadrzędnego.<br>
<br>
<br>
<br>
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.<br>
<br>
<br>
<br>
Tabela w HTML składa się z kilku współpracujących elementów: table jako kontenera, tr jako wiersza, td jako komórki danych oraz th jako komórki nagłówkowej. Każdy z nich pełni inną rolę i musi znaleźć się we właściwym miejscu, inaczej przeglądarka albo zignoruje strukturę, albo wyświetli ją w sposób nieprzewidywalny. Warto od początku budować tabelę świadomie, zamiast naprawiać ją później za pomocą stylów.<br>
<br>
<br>
<br>
Kiedy raster jeszcze daje radę Raster bywa jedynym sensownym wyborem, gdy liczy się wierne odwzorowanie faktury: zdjęcia, skany, malarstwo cyfrowe z miękkimi przejściami tonalnymi. Warunek jest jeden — plik musi mieć wystarczającą rozdzielczość od początku. Przy druku licz gęstość w punktach na cal i pomnóż przez docelowy wymiar. Obraz na plakat 60 na 90 centymetrów przy 300 punktach na cal wymaga około 7000 na 10600 pikseli. Jeśli masz połowę tego, nie ratuj tego rozciąganiem w edytorze.<br>
<br>
<br>
<br>
Praktyczna zasada jest prosta: kompresję traktuj jako ostatni krok, zapisuj raz, a jeśli musisz poprawić plik, wróć do wersji roboczej. Kiedy artefakty już wystąpią, nie da się ich cofnąć bez ponownego przetworzenia całego zdjęcia. Receptą nie jest podbijanie ostrości, lecz ograniczenie liczby stratnych zapisów i świadome dobranie formatu do przeznaczenia obrazu.<br>
<br>
<br>
<br>
Typowe błędy widać w praktyce. Pierwszy to brak z-index — nagłówek chowa się pod sliderem, modalami albo innymi elementami z wyższym stosem. Drugi to zerowa wysokość rodzica przy fixed, co kończy się nachodzeniem treści. Trzeci to sticky na elemencie, który sam jest wewnątrz kontenera z overflow, więc przyklejenie działa tylko do końca tego kontenera. Czwarty to animowanie właściwości top lub wysokości przy każdym zdarzeniu przewijania — to zmusza przeglądarkę do ciągłego przeliczania układu i powoduje zacięcia.<br>
<br>
<br>
<br>
Wydajność poprawia kilka nawyków. Zamiast nasłuchiwać scroll i zmieniać klasy w JavaScript, użyj IntersectionObserver albo samego CSS. Jeśli już musisz reagować na przewijanie, czytaj pozycję w requestAnimationFrame i nie zapisuj do DOM w każdej klatce. Przy fixed unikaj animowania top — lepiej przesuwać element przez transform: translateY, bo transform nie wywołuje przeliczeń układu. Na urządzeniach mobilnych pamiętaj, że pasek adresu zmienia wysokość okna; jednostki vh mogą powodować skoki, więc bezpieczniej ustalać wysokość nagłówka w pikselach lub przez zmienną aktualizowaną skryptem.<br>
<br>
<br>
<br>
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.<br>
<br>
<br>
<br>
Podsumowując: block to pełna kontrola nad wymiarem i pionowy układ, inline to płynny tekst bez kontroli rozmiaru, a inline-block to hybryda do elementów w linii z możliwością wymiarowania. Świadome stosowanie tych wartości oszczędza czas i zapobiega walkom z układem. Zanim sięgniesz po flexbox, sprawdź, czy prostsza zmiana display nie rozwiąże problemu.<br>
<br>
<br>
<br>
Raster przy skalowaniu w górę nie zyskuje żadnych nowych detali. Program rozciąga istniejące piksele i dopisuje brakujące na podstawie sąsiadów. Efekt widać natychmiast: krawędzie miękną, drobne litery się rozmywają, a cienkie linie znikają albo zamieniają się w poszarpane schodki. Jeśli plik ma 1000 pikseli szerokości, a potrzebujesz 8000, algorytm nie odtworzy szczegółu, którego nigdy w pliku nie było. Możesz co najwyżej wygładzić to, co zostało.<br>
<br>
<br>
<br>
Kolejny częsty problem to wyrównanie w pionie. Domyślnie inline-block wyrównuje się do linii bazowej tekstu, co może powodować nieoczekiwane przesunięcia. Właściwość vertical-align pozwala to kontrolować – np. top, middle, bottom. Warto też pamiętać, że elementy block można wyśrodkować poziomo za pomocą margin: 0 auto, ale tylko jeśli mają określoną szerokość. Inline-block nie da się wyśrodkować w ten sposób – wymaga text-align: center na rodzicu.