Gdy budujesz układ strony oparty na elementach, które mają stać w jednej linii i płynnie przechodzić do kolejnego wiersza, sięgasz po display o wartości inline-block. To rozwiązanie sprawdza się wszędzie tam, gdzie potrzebujesz, aby elementy zachowywały się jak znaki w akapicie, a jednocześnie przyjmowały szerokość, wysokość, marginesy i padding, czego nie da się zrobić na zwykłym inline. W praktyce wystarczy ustawić display: inline-block na kafelkach, przyciskach czy miniaturkach i pozwolić przeglądarce decydować, ile zmieści się w danym wierszu. Zanim jednak uznasz temat za zamknięty, musisz wiedzieć, że właśnie w zawijaniu kryje się najwięcej pułapek, które potrafią zepsuć nawet starannie zaprojektowany layout. Pierwsza zasada brzmi: elementy inline-block są traktowane jak słowa w zdaniu, więc dziedziczą po tekście wszystkie mechanizmy białych znaków, wcięć i łamania wierszy.Najczęstszy problem, na jaki trafisz, to tajemnicze odstępy między elementami. Wynikają one z tego, że kod HTML zawiera znaki nowej linii, tabulatory lub spacje między zamknięciem jednego znacznika a otwarciem następnego, a przeglądarka interpretuje je jak odstęp między wyrazami. Możesz temu zaradzić na kilka sposobów. Najprościej ustawić na kontenerze font-size: 0, a następnie przywrócić właściwy rozmiar czcionki wewnątrz elementów potomnych. Inna metoda to zapisanie znaczników bez żadnego odstępu, jeden tuż po drugim, albo użycie komentarza HTML między nimi, który „zje” biały znak. Trzecia droga to ujemny margines dopasowany do szerokości spacji, ale wymaga on żmudnego strojenia i psuje się przy zmianie fontu. Najbezpieczniejszy jest font-size: 0 na rodzicu, pamiętaj jednak, że zresetuje też rozmiar tekstu w dzieciach, więc musisz go jawnie nadpisać. Dodatkowo, gdy elementy mają różną wysokość, domyślne wyrównanie do linii bazowej sprawia, że wyglądają nierówno — ustaw na kontenerze vertical-align: top albo middle, żeby wyrównać je do góry lub do środka.Kolejna pułapka dotyczy samego zawijania i tego, sprawdź szczegóły kontrolować, gdzie dokładnie kończy się wiersz. Elementy inline-block łamią się w dowolnym miejscu, w którym zabraknie miejsca, więc jeśli chcesz mieć pewność, że dwa konkretne kafelki zawsze wylądują obok siebie, połącz je w niewidoczny wrapper, który sam będzie inline-block. Pamiętaj też, że zawijanie zależy od szerokości kontenera, więc ustal ją świadomie, a nie licz na to, że przeglądarka sama zgadnie twoje intencje. Warto ustawić white-space: nowrap, jeśli chcesz zablokować łamanie w obrębie jednej grupy, oraz white-space: normal na dzieciach, żeby tekst wewnątrz nadal się zawijał. Gdy elementy mają stałą szerokość w pikselach, a kontener jest płynny, na wąskich ekranach możesz dostać pojedynczy element w wierszu i dużo pustej przestrzeni obok — wtedy lepiej przełączyć się na flexbox z właściwością flex-wrap: wrap, która daje pełną kontrolę nad odstępami i wyrównaniem bez problemu białych znaków. Inline-block pozostaje jednak świetnym wyborem dla starszych projektów, prostych galerii i sytuacji, gdy nie chcesz przebudowywać całego układu. Testuj w przeglądarce przy różnych szerokościach, sprawdzaj, czy nic nie wychodzi poza kontener, i pamiętaj, że kilka drobnych reguł CSS rozwiązuje większość problemów z zawijaniem, zanim zdążą one dotrzeć na produkcję.
