5 przyczyn odstępu między elementami inline-block i jak go usunąć

Uwaga na marginesy i padding: w kontenerze elastycznym marginesy elementów nadal działają, ale nie są wliczane do rozkładu przestrzeni przez justify-content. Jeśli dodasz margin-left: auto do jednego elementu, odepchnie on pozostałe w prawo — to często prostsze niż zmiana justify-content. Z kolei gap działa w flexie od dawna i jest lepszym rozwiązaniem niż marginesy na każdym dziecku, bo nie tworzy odstępu na krawędziach kontenera.

Na co uważać? Po pierwsze, nie myl odstępu od białych znaków z domyślnym marginesem elementów. Po drugie, przy font-size: 0 pamiętaj o dzieciach — ich rozmiar czcionki musisz przywrócić, inaczej tekst zniknie. Po trzecie, nie ustawiaj szerokości 33,33% bez uwzględnienia przerwy, bo nawet najmniejsza spacja zepsuje układ. Najbezpieczniej jest albo usunąć białe znaki, albo przejść na flexbox.

Warto też pilnować długości nazw. user-profile__avatar-image--rounded to poprawny BEM, ale w małym projekcie lepiej skrócić do profile__avatar--rounded, jeśli profile i tak jest unikalny. BEM nie wymaga, żeby nazwy były długie — wymaga, żeby były jednoznaczne. If you loved this write-up and you would like to obtain far more data relating to patrz tutaj kindly check out our page. Jeśli dwa bloki mają ten sam element o tej samej roli, np. card__title i panel__title, to znak, że można wydzielić wspólny blok, np. heading, i używać go w obu miejscach.

Drugi sposób to warunki ładowania. Czcionki webowe pobierane z sieci mogą się nie wczytać z powodu blokad, wolnego łącza albo złej ścieżki. Wtedy przeglądarka przechodzi do kolejnej pozycji w stosie i wygląd się zmienia. W panelu sieci sprawdź, czy plik czcionki został pobrany z kodem powodzenia. Brak żądania oznacza, że przeglądarka w ogóle nie próbowała go użyć — bo uznała, że nie jest potrzebny, albo nie znalazła reguły @font-face.

Elementy elastyczne mają domyślnie flex: 0 1 auto. Pierwsza liczba to flex-grow, druga flex-shrink, trzecia flex-basis. W praktyce oznacza to, że elementy nie rosną ponad swoją szerokość bazową, ale mogą się kurczyć, gdy brakuje miejsca. Jeśli chcesz, żeby równe kolumny wypełniły całą szerokość, użyj flex: 1 na każdym z nich. Nie ustawiaj width: 100% na elemencie elastycznym, bo flex-basis i tak nadpisze tę wartość w obliczeniach.

Flexbox zaczyna się od jednej decyzji: który element ma być kontenerem. Ustawiasz na nim display: flex i od tego momentu wszystkie jego bezpośrednie dzieci stają się elementami elastycznymi. Wnuki nie dziedziczą tego zachowania — jeśli chcesz, żeby również były ułożone elastycznie, musisz zrobić z ich rodzica osobny kontener. To najczęstszy błąd na starcie: ludzie dodają display: flex do kilku poziomów i tracą kontrolę nad tym, co faktycznie się przesuwa.

Oś główna decyduje o wszystkim Kontener elastyczny ma dwie osie: główną i poprzeczną. Domyślnie oś główna biegnie poziomo, od lewej do prawej, a oś poprzeczna pionowo. Właściwość flex-direction zmienia kierunek osi głównej — wartości row, row-reverse, column i column-reverse przestawiają cały układ. Dopóki tego nie zrozumiesz, justify-content i align-items będą działać pozornie losowo. justify-content ustawia rozmieszczenie wzdłuż osi głównej, a align-items wzdłuż osi poprzecznej. Gdy zmieniasz flex-direction na column, te role się zamieniają.

Typowe błędy wynikają z nieuwagi. Pierwszy to ustawienie font-size: 0 na rodzicu i zapomnienie o przywróceniu go w elementach potomnych — tekst znika, a autor szuka winy w przeglądarce. Drugi to walka z odstępem przez margin: 0, który nic nie daje, bo problem nie leży w marginesach. Trzeci to wpisywanie szerokości 50% przy dwóch elementach i zdziwienie, że się nie mieszczą — szczelina dodaje się do sumy szerokości. Czwarty to ustawianie white-space: nowrap na rodzicu, co usuwa przełamywanie wierszy, ale nie usuwa samej spacji.

Warto sprawdzić, czy odstęp naprawdę pochodzi od białego znaku. Otwórz narzędzia deweloperskie, zaznacz element i sprawdź, jaka przestrzeń pojawia się między sąsiadami. Jeśli zniknie po sklejeniu znaczników w edytorze, masz odpowiedź. Jeśli nie — szukaj paddingu, obramowania albo marginesu. Rozróżnienie tych dwóch sytuacji oszczędza czas i pozwala naprawić przyczynę, a nie objaw.

Jak pozbyć się odstępu bez psucia semantyki Najprostsze rozwiązanie to usunięcie białych znaków w HTML — zapisanie znaczników jeden po drugim, bez spacji i bez przejścia do nowej linii. Działa, ale kod staje się nieczytelny, a przy większej liczbie elementów łatwo o pomyłkę. Lepszym sposobem jest ustawienie na rodzicu font-size: metamorfoza mieszkania 0, a następnie przywrócenie właściwego rozmiaru czcionki wewnątrz samych elementów. Trzeba pamiętać o tym drugim kroku, bo inaczej zniknie cały tekst, a nie tylko szczelina.

Jeśli chcesz, aby element nigdy się nie kurczył, ustaw flex-shrink: 0. Pamiętaj jednak, że wtedy może dojść do przepełnienia kontenera i pojawienia się paska przewijania. Alternatywnie zwiększ flex-shrink dla elementów, które mogą się zmniejszać, a dla tego jednego ustaw 0. Możesz też manipulować flex-basis — im większa wartość bazowa, tym większy udział w kurczeniu. Czasem lepiej użyć min-width: 0 na elemencie flex, aby umożliwić kurczenie poniżej rozmiaru treści. Domyślnie elementy flex mają min-width: auto, co może blokować kurczenie poniżej rozmiaru zawartości. Ustawienie min-width: 0 pozwala zejść niżej.