Edytujesz Gdy dwa marginesy znikają w jeden i psują układ strony

Najczęstsze błędy to kopiowanie reguły w inne miejsce bez usunięcia starej, dopisywanie zmian na końcu przypadkowego pliku oraz poleganie na kolejności tam, gdzie selektory mają różną specyficzność. Zamiast tego ustal jedną kolejność: najpierw style wspólne, potem komponenty, na końcu wyjątki. Gdy późniejsza linia nadpisuje wcześniejszą, sprawdź, czy to zamierzone. Jeśli nie — popraw selektor albo przenieś regułę, zamiast dodawać kolejną warstwę.<br><br>Możesz łączyć jednostki fr z wartościami stałymi, na przykład 200px 1fr 2fr. Wtedy najpierw odejmowana jest kolumna 200 pikseli, a pozostała przestrzeń dzielona jest w stosunku jeden do dwóch. Błąd pojawia się, gdy do sztywnej kolumny wrzucisz treść szerszą niż jej szerokość. Jednostka fr nie chroni przed przepełnieniem — sztywna kolumna po prostu rozepchnie układ albo obetnie zawartość. Lekarstwem jest min-width: 0 na elementach wewnątrz kolumn oraz unikanie długich, nieprzerywalnych ciągów znaków.<br><br>Gdy kontener istnieje, flexbox wyznacza oś główną. Domyślnie biegnie ona poziomo, od lewej do prawej, a oś poprzeczna pionowo. Wszystko, co robisz później, odnosi się właśnie do tych osi. justify-content działa wzdłuż osi głównej, align-items wzdłuż poprzecznej. Zamiana flex-direction na column obraca obie osie, więc właściwości zaczynają działać w innych kierunkach, niż się spodziewasz.<br><br>W pionowym układzie strony marginesy sąsiadujących elementów blokowych nie sumują się. Górny margines jednego akapitu i dolny margines następnego stykają się i przeglądarka wybiera większą z tych wartości. Jeśli nad akapitem stoi 24 piksele odstępu, a pod nim 16, między nimi będzie 24, a nie 40. Mechanizm nazywa się zapadaniem marginesów i dotyczy wyłącznie kierunku pionowego. Poziome odstępy zawsze się sumują.<br><br>Kolejna pułapka to wymiary elementów. Element flex nie kurczy się poniżej swojej minimalnej zawartości, dopóki nie ustawisz min-width: 0. Długi tekst potrafi rozepchnąć cały rząd i zepsuć układ, mimo że szerokości wyglądają dobrze w kodzie. Jeśli elementy mają się dzielić przestrzenią, użyj flex: 1 i zadbaj o min-width: 0 na tych, które zawierają treść.<br><br>Nie mieszaj flexboxa z ręcznym pozycjonowaniem ani z float. Flex ignoruje część starych właściwości, a próba łączenia obu podejść daje efekty, których nie da się przewidzieć. Trzymaj się jednego modelu: kontener, oś główna, oś poprzeczna. Gdy układ przestaje działać, wróć do tych trzech pojęć i sprawdź, czy element, który ustawiasz, faktycznie jest dzieckiem kontenera i czy oś główna biegnie tak, jak zakładasz.<br><br>Gdy elementy inline-block mają różne wysokości i mają tworzyć równy rząd, najpewniejszym rozwiązaniem jest zmiana kontekstu formatowania. Ustawienie na rodzicu display: flex likwiduje cały problem, bo elementy przestają być traktowane jak znaki i nie mają linii bazowej do wyrównania. Jeśli flex nie jest możliwy, można zastosować float, ale wtedy trzeba pamiętać o czyszczeniu i o tym, że float również wypada z normalnego przepływu. Ostatnia deska ratunku to font-size: 0 na rodzicu i przywrócenie rozmiaru na dzieciach — działa, ale utrudnia utrzymanie kodu i bywa źródłem błędów przy dostępności.<br><br>Elementy ustawione jako inline-block zachowują się inaczej niż zwykłe bloki. Siadają w linii tekstu jak znaki, więc podlegają regułom typografii — między innymi wyrównaniu do linii bazowej. Domyślnie przeglądarka ustawia ich dolną krawędź dokładnie na linii bazowej otaczającego tekstu. Jeśli element ma wysokość większą niż wysokość fontu, jego dolna krawędź nie pokrywa się z dołem wiersza i cała linia zaczyna się rozjeżdżać. To najczęstsza przyczyna tego, że przycisk albo kafelek nagle „unosi" sąsiedni tekst o kilka pikseli w górę.<br><br>Problem widać najlepiej, gdy obok siebie stoją dwa elementy inline-block o różnej wysokości albo gdy jeden z nich zawiera obrazek. Obrazek jest elementem zastępowanym, więc nie ma własnej linii bazowej — przeglądarka traktuje jego dolną krawędź jako linię bazową. W efekcie pod obrazkiem pojawia się kilkupikselowa szpara, której nie da się usunąć marginesem. To nie błąd silnika, tylko poprawne działanie modelu inline. Wystarczy zmienić sposób wyrównania, żeby szpara zniknęła.<br><br>Co ustawić, żeby górna krawędź i linia bazowa przestały walczyć Najprościej sięgnąć po właściwość vertical-align. Wartość top wyrównuje górną krawędź elementu do górnej krawędzi najwyższego elementu w linii. Wartość bottom robi to samo z dolną krawędzią. Wartość middle ustawia środek elementu na wysokości połowy wysokości x fontu — to przydaje się przy ikonach obok tekstu. Wartość baseline zostawia domyślne zachowanie i właśnie ona najczęściej psuje układ. Warto pamiętać, że vertical-align działa tylko na elementach inline i inline-block, a nie na blokach ani elementach flex.