Co wybrać: listę numerowaną, punktowaną czy definicji?

Zanim zmienisz display, sprawdź w narzędziach deweloperskich, jak element zachowuje się domyślnie. Często wystarczy drobna korekta, a nie przepisywanie całego układu. Pamiętaj też, że display: none usuwa element z przepływu, a visibility: hidden tylko go ukrywa, zostawiając puste miejsce. Te dwie właściwości mylone są nagminnie i potrafią zepsuć zarówno układ, jak i dostępność strony.

Inline-block to hybryda. Element nadal ustawia się w linii z innymi, ale zyskuje możliwość ustawiania width, height, margin i padding bez rozrywania układu. Świetnie sprawdza się przy przyciskach, kartach czy elementach nawigacji, które mają stały rozmiar, ale mają stać obok siebie. Uwaga na whitespace w kodzie HTML — spacja między elementami inline-block tworzy dodatkowy odstęp. Można go usunąć, pisząc znaczniki bez odstępu, komentując go albo ustawiając font-size: 0 na rodzicu i przywracając go na dzieciach.

Kiedy wystarczy zwykłe wyliczenie, a kiedy potrzebujesz definicji Lista punktowana sprawdza się, gdy zbierasz elementy tego samego typu: cechy, przykłady, składniki, warunki, zalety i wady. Kolejność jest dowolna albo celowo równorzędna. Uważaj na dwa błędy. Pierwszy: mieszanie poziomów — obok „szybkość" ląduje „wdrożenie nowego systemu", a to już nie ta sama kategoria. Drugi: zbyt długie punkty. Jeśli pozycja zajmuje trzy linijki, to nie jest już lista, a akapit przebrany za wyliczenie. Skróć do jednej myśli albo rozbij na podpunkty.

Kolor w CSS można zapisać na kilka sposobów: nazwą, szesnastkowo, przez rgb() i przez hsl(). Przeglądarka rozumie każdy z nich, ale nie każdy nadaje się do tych samych zadań. Nazwy kolorów są wygodne w prototypach i szybkich testach, bo wpisujesz red i widzisz efekt. Problem pojawia się, gdy potrzebujesz konkretnego odcienia — nazwanych kolorów jest ograniczona liczba, a ich dokładne wartości bywają różne w zależności od systemu. W praktyce nazwy traktuj jako skrót, nie jako precyzyjne narzędzie.

Kiedy inline psuje układ, a kiedy pomaga Elementy inline, takie jak span, a, strong czy em, nie łamią linii. Zajmują dokładnie tyle miejsca, ile wynika z ich treści. Nie ustawisz im width ani height, a padding pionowy nachodzi na sąsiednie linie, nie przesuwając ich. Marginesy działają tylko w poziomie. To częste źródło frustracji: ktoś dodaje padding do linku, wygląda dobrze w jednej linii, a przy zawijaniu tekstu nachodzi na akapit powyżej. Rozwiązaniem jest zmiana display na inline-block albo block.

Kompresja w formatach graficznych to nie „magia", która zawsze działa tak samo. Najczęstszy problem pojawia się na krawędziach: tam, gdzie stykają się dwa kontrastujące kolory, np. czarny napis na białym tle albo cienka linia na jednolitym obszarze. Algorytmy kompresji stratnej, takie jak JPEG, dzielą obraz na bloki (zwykle 8x8 pikseli) i przekształcają je w dziedzinę częstotliwości. Na ostrych krawędziach pojawiają się wtedy wysokie częstotliwości, które są bezlitośnie obcinane przy mocniejszej kompresji. Efekt? Rozmycia, „duszki" (ghosting) i charakterystyczne rozmazane plamy wokół krawędzi.

Najprostszy przypadek: trzy kolumny o zapisie 1fr 1fr 1fr. Każda dostaje dokładnie jedną trzecią wolnej przestrzeni. Gdy dodasz odstęp gap, przeglądarka najpierw rezerwuje miejsce na przerwy, a dopiero potem dzieli resztę. To znaczy, że przy gap: 20px i trzech kolumnach wolna przestrzeń jest mniejsza o dwa odstępy — nie o trzy, bo przerw jest zawsze o jedną mniej niż kolumn. Ten szczegół często umyka i prowadzi do przeliczania szerokości „na piechotę", co jest niepotrzebne, bo grid robi to sam.

Elementy block, jak div, p, h1 czy section, zajmują całą dostępną szerokość rodzica i zaczynają się od nowej linii. Kolejny element block wyląduje pod nim, nawet jeśli wizualnie zostałoby miejsce obok. Możesz swobodnie ustawiać im width, height, margin i padding we wszystkich kierunkach. Typowy błąd to wrzucanie span do akapitu i próba nadania mu szerokości bez zmiany display — wtedy width zostanie zignorowany, a element nadal będzie płynął w linii tekstu.

Kiedy komórka zajmuje więcej miejsca niż powinna Scalanie komórek to najczęstsze źródło błędów w układzie tabeli. Atrybuty colspan i rowspan rozciągają komórkę odpowiednio w poziomie i w pionie, ale nie zwalniają z liczenia. Jeśli w wierszu użyjesz colspan=2, w tym samym wierszu musisz mieć o jedną komórkę mniej niż w pozostałych. Przekroczenie liczby kolumn wypycha zawartość poza tabelę albo tworzy puste, niekontrolowane pola. Podobnie rowspan: komórka rozciągnięta w pionie zabiera miejsce w kolejnych wierszach, więc nie wstawiaj tam następnych w tej samej kolumnie. Najbezpieczniej najpierw naszkicować siatkę na kartce, a dopiero potem pisać kod.

Listę numerowaną stosuj wtedy, gdy kolejność ma znaczenie. Kroki instalacji, etapy procedury, ranking od najważniejszego do najmniej istotnego, sekwencja zdarzeń — wszystko, co traci sens po przestawieniu. Pisz krótko: jedno działanie na punkt, zaczynaj od czasownika („Zapisz plik", „Zamknij program"). Typowy błąd to wrzucanie do numeracji rzeczy równorzędnych, które nie tworzą sekwencji. Wtedy czytelnik szuka logiki, której nie ma, i traci zaufanie do instrukcji.