Elementy inline, takie jak span, a czy strong, są fundamentalnie inne od elementów blokowych. Wynika to z modelu formatowania CSS, w którym elementy inline nie generują nowych wierszy i nie mają zastosowania do nich właściwości width i height. Przeglądarki po prostu ignorują te deklaracje, co często zaskakuje osoby zaczynające pracę z CSS. Warto zrozumieć, dlaczego tak się dzieje, ponieważ pozwala to uniknąć frustracji i świadomie projektować układy.

Przyczyną jest sposób, w jaki przeglądarka oblicza rozmiar elementu inline. Taki element zajmuje tylko tyle miejsca, ile wynika z jego zawartości – tekstu, obrazka czy innego elementu inline. Nie można mu narzucić sztywnej szerokości ani wysokości, bo nie jest traktowany jako niezależny prostokąt w układzie. Co więcej, dziedziczenie właściwości CSS, takie jak dziedziczenie właściwości CSS, może dodatkowo komplikować przewidywanie efektów, zwłaszcza gdy mieszamy elementy inline z blokowymi. W praktyce oznacza to, że ustawienie width: 200px na elemencie span nie przyniesie żadnego rezultatu.

Istnieje kilka sposobów obejścia tego ograniczenia. Najprostszym jest zmiana display na inline-block lub block. Wtedy element zaczyna respektować width i height, zachowując przy tym część cech inline (w przypadku inline-block nadal może sąsiadować z innymi elementami w linii). Inną metodą jest użycie flex lub grid na rodzicu – wtedy dzieci stają się elementami flex/grid i automatycznie zyskują możliwość ustawiania wymiarów. Można też zastosować padding i margin w poziomie, które działają na inline, ale nie wpłyną na wysokość linii. Wybór zależy od kontekstu i tego, czy chcemy zachować przepływ tekstu, czy całkowicie zmienić model pudełkowy.

Warto pamiętać, że niektóre właściwości, jak line-height czy vertical-align, działają na elementach inline inaczej niż na blokowych. Świadome korzystanie z tych różnic pozwala na precyzyjne dostrajanie typografii. Jeśli jednak potrzebujesz kontroli nad wymiarem, zawsze rozważ zmianę display lub użycie nowoczesnych metod układu. Dzięki temu unikniesz nieporozumień i szybciej osiągniesz zamierzony efekt wizualny.