Dwa elementy HTML nie mieszczą się obok siebie najczęściej dlatego, że są elementami blokowymi. Element blokowy z definicji zajmuje całą dostępną szerokość swojego kontenera i zaczyna się w nowej linii, spychając kolejne elementy pod siebie. Typowe przykłady to div, p, section, article czy h1–h6. Nawet jeśli ustawisz im niewielką szerokość, nadal zachowują się jak bloki i nie ustawią się w jednej linii, dopóki nie zmienisz im sposobu wyświetlania.

Drugą częstą przyczyną jest domyślne zachowanie elementów liniowych, takich jak span, a czy strong. One co prawda układają się w jednej linii, ale nie przyjmują wartości width i height w sposób, jakiego oczekujesz, a pionowe marginesy działają inaczej niż w blokach. Jeśli chcesz zrozumieć różnice między tymi modelami, przeczytaj wyjaśnienie o elementach blokowych i liniowych, bo to fundament, od którego zależą dalsze poprawki. Bez tej wiedzy łatwo uznać, że problem leży w marginesach, gdy naprawdę chodzi o sam typ elementu.

Najprostsze rozwiązanie to zmiana display na inline-block lub flex. Inline-block sprawia, że element nadal jest traktowany jak liniowy, ale przyjmuje szerokość, wysokość i marginesy pionowe. Flex działa inaczej: ustawiasz go na kontenerze-rodzicu, a dzieci układają się w rzędzie lub kolumnie zależnie od flex-direction. Do tego dochodzi white-space w kontenerze oraz ewentualne odstępy wynikające ze spacji w kodzie HTML, które potrafią rozepchnąć układ o kilka pikseli.

Zanim zaczniesz przesuwać elementy na siłę, sprawdź, czy nie nachodzą na siebie przez position absolute albo ujemne marginesy. Warto też zajrzeć do narzędzi deweloperskich i podejrzeć computed display oraz box model. W większości przypadków wystarczy jedna zmiana w CSS: display: inline-block na dzieciach albo display: flex na rodzicu. Dopiero gdy to nie pomoże, szukaj przyczyn w float, clear czy gridzie, bo one również potrafią wymuszać nową linię.