Gdy position absolute ucieka z układu, znajdź przodka z position
flex-basis działa podobnie do width, ale ma wyższy priorytet, dopóki nie ustawisz width z wartością inną niż auto. Domyślnie wynosi auto, co oznacza: weź rozmiar z width albo z zawartości. Najczęstszy błąd to ustawienie flex-basis: 0 bez jednostki i zdziwienie, że element zachowuje się inaczej niż przy width: 0. Zero bez jednostki jest poprawne dla flex-basis, ale już nie dla width — tam trzeba podać 0px. Kolejna pułapka: flex-basis ignoruje box-sizing w kontekście obliczania wolnego miejsca, więc padding i border dodają się do sumy i potrafią zepsuć proporcje.<br>
<br>
<br>
<br>
Formularz zaczyna się od znacznika . To on grupuje pola i decyduje, co stanie się z danymi po zatwierdzeniu. Dwa atrybuty robią najwięcej zamieszania: action wskazuje adres, pod który trafią dane, a method określa sposób ich przesłania — najczęściej GET albo POST. Bez action przeglądarka wyśle dane pod bieżący adres, co rzadko jest zamierzone. Bez method zadziała domyślne GET, przez co wartości pól wylądują w adresie strony. Do wysyłania haseł, plików i dłuższych treści używaj POST.<br>
<br>
<br>
<br>
Element z display: block zachowuje się jak akapit czy nagłówek. Zajmuje całą dostępną szerokość kontenera, a kolejny element block zaczyna się w nowej linii. Możesz mu swobodnie ustawiać width, height, margin i padding. Typowe błędy? Ustawianie szerokości na 100% i dodawanie paddingu bez box-sizing: border-box — wtedy element wystaje poza rodzica. Drugi częsty problem to próba ustawienia dwóch bloków obok siebie za pomocą samych marginesów; bez float, flex lub grid to się nie uda.<br>
<br>
<br>
<br>
Display: inline-block łączy cechy obu. Element płynie w linii obok innych, ale przyjmuje width, height oraz pełne margin i padding. Świetnie sprawdza się przy przyciskach, kartach czy kafelkach, które mają stać obok siebie i mieć określone wymiary. Uwaga na wspomniane białe znaki — jeśli w kodzie masz enter między elementami inline-block, zobaczysz kilkupikselową przerwę. Rozwiązania: usuń spacje w HTML, ustaw font-size: 0 na rodzicu i przywróć go na dzieciach albo użyj komentarza między znacznikami.<br>
<br>
<br>
<br>
Element z position: absolute pozycjonuje się względem najbliższego przodka, który ma position inne niż static. Jeśli takiego przodka nie ma, punktem odniesienia staje się początkowa zawartość obszaru dokumentu — czyli w praktyce lewy górny róg strony przesuwany przez przewijanie. To najczęstsza przyczyna sytuacji, w której element ląduje w zupełnie innym miejscu, niż zakładał projekt.<br>
<br>
<br>
<br>
Efekt jest szczególnie widoczny przy budowie siatek opartych na procentach. Trzy kolumny po 33,33% nie zmieszczą się w wierszu, bo dwa odstępy dodają kilka pikseli i ostatni element spada do nowej linii. Typowy błąd to szukanie winy w marginach, paddingach albo border-box. Warto wtedy sprawdzić, czy w kodzie HTML między zamknięciem jednego znacznika a otwarciem drugiego nie ma przejścia do nowej linii. Często wystarczy usunąć białe znaki, ale trzeba to robić świadomie.<br>
<br>
<br>
<br>
Jak usunąć odstęp bez psucia kodu Najprostszy sposób to zapisanie elementów w jednej linii, bez spacji i enterów między znacznikami. Działa, ale kod staje się długi i trudny w utrzymaniu, zwłaszcza gdy elementów jest wiele. Inna metoda to ustawienie na rodzicu font-size: 0, a na dzieciach przywrócenie właściwego rozmiaru czcionki. To skuteczne, lecz trzeba pamiętać o każdym potomku — pominięcie jednego spowoduje, że jego tekst zniknie. Uwaga też na jednostki em i rem zależne od font-size rodzica.<br>
<br>
<br>
<br>
Gdy obok siebie ustawisz kilka elementów z właściwością display: inline-block, między nimi pojawi się niewielka przerwa, której nie zdefiniowałeś w CSS. To nie margines ani padding — to znak białej spacji w kodzie HTML. Przeglądarka traktuje każdy enter, tabulację i spację między znacznikami jako separator tekstu, a elementy inline-block układają się w linii tekstu, więc ten separator zajmuje miejsce i tworzy odstęp o szerokości zwykłej spacji.<br>
<br>
<br>
<br>
Trzy właściwości decydują o tym, kto dostanie wolne miejsce w kontenerze flex, a kto je odda. flex-grow mówi, jak element rośnie, gdy miejsca jest za dużo. flex-shrink mówi, jak się kurczy, gdy miejsca brakuje. flex-basis ustala punkt wyjścia — rozmiar, od którego zaczyna się cała zabawa. Bez zrozumienia tej trójki można godzinami przesuwać suwaki i nie uzyskać oczekiwanego układu.<br>
<br>
<br>
<br>
Każdy element HTML ma domyślny sposób zachowania w układzie strony, nazywany display. Najczęściej spotkasz trzy wartości: block, inline oraz inline-block. Od nich zależy, czy element zajmie całą szerokość, czy tylko tyle miejsca, ile potrzebuje jego treść, a także czy będzie można ustawiać mu szerokość i wysokość. Zanim zaczniesz przesuwać elementy marginesami, sprawdź, z jakim displayem pracujesz — to oszczędza mnóstwo czasu.<br>
<br>
<br>
<br>
Drugi częsty problem to zbyt wczesna walidacja po stronie przeglądarki. Atrybuty required, minlength czy pattern sprawdzają dane przed wysłaniem, ale nie zastępują weryfikacji na serwerze. Użytkownik może je obejść, a pola mogą przyjść puste lub w nieoczekiwanym formacie. Zawsze sprawdzaj dane ponownie po stronie serwera i nie ufaj temu, co przyszło z przeglądarki. Pamiętaj też, że type="email" sprawdza tylko ogólny kształt adresu, a nie to, czy skrzynka istnieje.