Czy inline-block da się wyrównać do linii bazowej i górnej krawędzi?
Sprawdź, zanim zaczniesz edytować Zanim wpiszesz nową wartość, ustal, czy problem leży w kaskadzie, czy w nieprawidłowej nazwie właściwości. Wpisz nową wartość w miejscu starej i zatwierdź klawiszem Enter. Jeśli nic się nie zmieni, sprawdź, czy reguła nie jest przekreślona oraz czy inna, bardziej szczegółowa reguła jej nie nadpisuje. Częsty błąd polega na edycji właściwości w panelu, który pokazuje wyliczone wartości, a nie źródłowe deklaracje. Wyliczone wartości są tylko wynikiem obliczeń i nie da się ich trwale zmienić.<br>
<br>
<br>
<br>
Jak technicznie przypisać etykietę do kilku pól Najprostsza metoda to zagnieżdżenie. Jeśli w treści label umieścisz kilka elementów input, każdy z nich stanie się częścią tej samej etykiety. Drugi sposób to użycie wielu osobnych label z tym samym atrybutem for, wskazującym na to samo id. Można też zastosować grupę pól i opisać ją jednym label bez for, ale wtedy powiązanie z konkretnym polem jest słabsze. Kluczowe jest to, że przeglądarki i czytniki ekranu inaczej interpretują te warianty, dlatego nie każdy sprawdzi się w każdym kontekście.<br>
<br>
<br>
<br>
Osobny problem to odstęp pod elementem inline-block, widoczny jako kilka pikseli pustki nad dolną krawędzią rodzica. Bierze się z tego, że element jest traktowany jak litera i rezerwuje miejsce na zstępniki. Rozwiązania są trzy: ustawić vertical-align: bottom, zmienić display rodzica na flex albo ustawić font-size: 0 na kontenerze i przywrócić normalny rozmiar czcionki wewnątrz elementów. Ostatnia metoda bywa wygodna, ale wymaga pilnowania, żeby żaden tekst nie odziedziczył zera.<br>
<br>
<br>
<br>
Scalanie komórek w tabeli HTML sprowadza się do dwóch atrybutów: colspan rozciąga komórkę w poziomie, rowspan w pionie. Wartość to liczba komórek, które dana komórka zajmuje — nie liczba dodatkowych kolumn. Najczęstszy błąd polega na wpisaniu colspan="2" tam, gdzie kolumn ma być trzy, bo autor liczy „dokładane" komórki, a nie całkowitą szerokość. Efekt widać dopiero wtedy, gdy wiersz poniżej ma inną liczbę komórek i tabela zaczyna się przesuwać o jedną kolumnę w prawo z każdym kolejnym wierszem.<br>
<br>
<br>
<br>
Nie traktuj flexboxa jak zamiennika wszystkich metod układu. Do rozmieszczenia elementów w jednej osi jest niezastąpiony. Do budowy dwuwymiarowej siatki lepiej użyć grid. Świadomość, gdzie kończy się flex, a zaczyna grid, oszczędza wiele godzin debugowania.<br>
<br>
<br>
<br>
Inspektor elementów otwiera się zwykle klawiszem F12 albo skrótem z klawiszem modyfikującym i literą I. W oknie, które się pojawi, zakładka z elementami pokazuje strukturę dokumentu po prawej, a po drugiej stronie panel ze stylami. To, co widzisz w panelu, to nie zawartość pliku, tylko stan po zastosowaniu wszystkich arkuszy: zewnętrznych, wewnętrznych, reguł użytkownika, a także zmian wprowadzonych wcześniej ręcznie. Dlatego pierwsza rzecz, którą warto zrobić, to zorientować się, czy dana reguła pochodzi z pliku, czy została dodana w przeglądarce.<br>
<br>
<br>
<br>
Oś główna to kierunek, w którym układają się elementy. Domyślnie flex ustawia flex-direction: row, więc oś główna biegnie poziomo, od lewej do prawej. Oś poprzeczna jest do niej prostopadła. Gdy zmienisz kierunek na column, osie zamieniają się miejscami — to najczęstsze źródło pomyłek przy justowaniu. Właściwość justify-content działa zawsze wzdłuż osi głównej, a align-items wzdłuż osi poprzecznej. Zanim zaczniesz przesuwać elementy, sprawdź, którą osią aktualnie pracujesz.<br>
<br>
<br>
<br>
Weźmy plan tygodnia: kolumna z godziną i siedem kolumn z dniami od poniedziałku do niedzieli. Jeśli zajęcia „WF" mają się powtarzać w poniedziałek, środę i piątek o tej samej godzinie, nie scalamy ich w jeden blok — to trzy osobne komórki. Scalanie ma sens tylko wtedy, gdy komórka naprawdę obejmuje kilka pozycji, na przykład blok „projekt" trwający od wtorku do czwartku. Wtedy pierwsza komórka dostaje colspan="3", a w kolejnych dwóch wierszach trzeba pominąć odpowiednie komórki, bo są już zajęte przez blok.<br>
<br>
<br>
<br>
Z rowspan jest trudniej, bo komórka zabiera miejsce w wierszach poniżej. Reguła jest twarda: jeśli komórka w pierwszym wierszu ma rowspan="3", to w drugim i trzecim wierszu trzeba pominąć jedną komórkę w tej samej pozycji. Pominięcie polega na niepisaniu znacznika w tym miejscu — nie na wstawianiu pustego. Puste komórki to drugi najczęstszy błąd: tabela wygląda poprawnie, dopóki nie włączy się obramowanie, wtedy widać przesunięte kolumny i nierówne wiersze.<br>
<br>
<br>
<br>
Kolejnym częstym problemem jest import arkuszy stylów. Reguły z pliku dołączonego później mają wyższy priorytet niż te z pliku wcześniejszego, nawet jeśli w samym pliku wyglądają na mniej istotne. Warto więc ustalić stałą kolejność: najpierw style bazowe, potem komponenty, na końcu nadpisania dla konkretnych widoków. Dzięki temu nie musisz pamiętać, co było w której linii — po prostu wiesz, że późniejsze warstwy są świadomymi wyjątkami.