Display inline psuje układ, bo zapominasz o wysokości linii
display: inline-block łączy cechy obu. Element płynie w linii jak inline, ale przyjmuje szerokość, wysokość i pełne marginesy. To najczęstszy wybór przy przyciskach, plakietkach i kafelkach ustawianych obok siebie. Problem pojawia się przy wyrównaniu: elementy inline-block bazują na linii pisma, więc wysoki element wypycha w dół niższe, a pod spodem zostaje szczelina wynikająca z odstępu między liniami. Ustawienie vertical-align: top lub middle na wszystkich elementach zwykle to naprawia.<br>
<br>
<br>
<br>
Większość problemów z grafiką bierze się z wyboru formatu na końcu, gdy obraz jest już gotowy. Tymczasem format determinuje, co można z plikiem zrobić później: czy da się zmienić tło, czy nadaje się do druku, czy przetrwa powiększenie. Trzy formaty pokrywają niemal wszystkie codzienne sytuacje: JPG do zdjęć, PNG do obrazów z przezroczystością, SVG do ikon i prostych rysunków wektorowych.<br>
<br>
<br>
<br>
Typowy błąd to ustawianie height na elemencie inline i zdziwienie, że nic się nie dzieje. Drugi to próba wyśrodkowania inline-blocka przez margin: auto — to działa tylko dla bloku z określoną szerokością. Trzeci to mieszanie inline-blocków z blokami w jednym wierszu i walka z pionowym rytmem, którego źródłem jest właśnie line-height rodzica, a nie same elementy.<br>
<br>
<br>
<br>
display: inline wstawia element w nurt tekstu. Nie da się mu ustawić szerokości ani wysokości — te właściwości są ignorowane. Padding i margines działają tylko w poziomie; pionowe wartości nachodzą na sąsiednie linie i nie powiększają wysokości rodzica. Dlatego link czy span z dużym paddingiem wygląda dobrze, ale kontener go nie obejmuje. Kolejna pułapka: spacje i entery między elementami inline tworzą widoczne odstępy, których nie da się usunąć marginesem.<br>
<br>
<br>
<br>
Najczęstszy błąd to zła nazwa. System może dopisać ukryte rozszerzenie i plik nazywa się w rzeczywistości index.html.txt. Sprawdź nazwę w oknie właściwości albo włącz wyświetlanie rozszerzeń w menedżerze plików. Druga pułapka to kodowanie znaków — jeśli w pliku są polskie litery, a zapisano go w innym kodowaniu niż zadeklarowane w nagłówku, strona pokaże krzaki. Zapisuj w UTF-8 i pilnuj zgodności z deklaracją w sekcji head.<br>
<br>
<br>
<br>
Zanim zmienisz display, sprawdź, czy element ma zachowywać się jak fragment tekstu czy jak niezależny prostokąt. Do pierwszego użyj inline, do drugiego block, a inline-block tylko wtedy, gdy naprawdę potrzebujesz obu cech naraz. Jeśli układ ma być elastyczny, lepszym rozwiązaniem od inline-block jest flex lub grid — nie walcz z odstępami między znakami, których inline-block sam nie usunie.<br>
<br>
<br>
<br>
Pierwsza pułapka to import i dołączanie arkuszy. Jeśli w jednym pliku masz reguły, a w drugim te same selektory, o wyniku decyduje kolejność ładowania plików oraz miejsce, w którym wstawiono odwołanie do nich. Praktyczna zasada: trzymaj bazowe style w jednym miejscu, a nadpisania w osobnym pliku ładowanym po nim. Nie mieszaj obu ról w jednym arkuszu, bo przy każdej zmianie będziesz zgadywać, co jest wcześniej, a co później.<br>
<br>
<br>
<br>
SVG to zupełnie inna kategoria. Nie opisuje pikseli, tylko kształty: okręgi, ścieżki, kolory, grubości linii. Dzięki temu ten sam plik jest ostry przy każdej skali — od małej ikony w interfejsie po duży wydruk. Idealnie nadaje się do ikon, logotypów z prostą geometrią, wykresów i elementów interfejsu. Ma jednak granice: skomplikowane zdjęcie zapisane jako SVG zamieni się w tysiące ścieżek, plik będzie ciężki, a wynik gorszy niż w JPG. Kolejna pułapka to efekty rastrowe — cienie, rozmycia i gradienty bywają w SVG obsługiwane różnie przez przeglądarki i programy graficzne, więc to, co widzisz w edytorze, nie zawsze wygląda tak samo u odbiorcy.<br>
<br>
<br>
<br>
Trzecia pułapka to media queries i stany. Reguły w zapytaniach o media nie mają automatycznie większej wagi — liczy się ich pozycja względem reszty. Jeśli umieścisz je przed stylami bazowymi, te drugie mogą je nadpisać przy spełnionym warunku. Podobnie jest z pseudoklasami, na przykład stanem najechania kursorem. Kolejność ma znaczenie również wtedy, gdy warunek jest aktywny. Praktyczny nawyk: najpierw style ogólne, potem stany, a na końcu zapytania o media. Dzięki temu późniejsza linia rzeczywiście robi to, czego oczekujesz.<br>
<br>
<br>
<br>
Kaskada to mechanizm, w którym przeglądarka rozstrzyga konflikt między regułami. Gdy dwie reguły pasują do tego samego elementu i mają taką samą wagę, wygrywa ta, która pojawia się później w źródle. To brzmi banalnie, dopóki nie zobaczysz, jak łatwo odwrócić tę kolejność przez przypadek. Wystarczy dopisać nowy styl na końcu arkusza, dołączyć plik z importem w złym miejscu albo użyć selektora o tej samej specyficzności w innym pliku — i nagle „popsuty" układ okazuje się skutkiem kolejności, a nie złego kodu.<br>
<br>
<br>
<br>
Na koniec pamiętaj o domknięciu wszystkich znaczników. Przeglądarki wybaczają wiele błędów, ale niedomknięty tr czy td potrafi rozsypać całą strukturę. Warto też dodać caption jako pierwszy element wewnątrz table — krótki opis tabeli wyświetli się nad nią i pomoże zrozumieć, czego dotyczą dane. Tabela zbudowana z tych pięciu elementów — table, caption, tr, th i td — jest czytelna, dostępna i przewidywalna w każdej przeglądarce.