Programowanie webowe | 02. Float left vs. Display inline-block

Metoda display:inline-block

Mirosław Zelent

Atrybut display:inline-block wstawiamy do każdego bloku, który ma być wyświetlony w linii – oto cała filozofia tego rozwiązania. Nie zachodzi tutaj w ogóle potrzeba stosowania zapisu clear: both, gdyż nie “wyrywamy” bloków z domyślnego flow witryny:

display:inline-block

Niestety w metodzie tej występują problemy z występowaniem znaków białych (odstępów poziomych) pomiędzy blokami ustawionymi w linii. Niewielkie pionowe odstępy (choć występują) nie stanowią taki wielkiego problemu jak "spacje" poziome.

Zalety podejścia display: inline-block

  • Nie występuje potrzeba czyszczenia float:leftu z użyciem clear:both w dodatkowym elemencie blokowym;
  • Bloki z ustawionym inline-blockiem “słuchają” ustawienia text-align:center kontenera, w którym się znajdują;
  • Metoda nowsza, pomyślana jako alternatywa do “wyrywającego” bloki z flow witryny opływania.

Wady podejścia display: inline-block

  • Metoda nie działa poprawnie w IE 6/7 (słabsza kompatybilność wsteczna),
  • Problemy z występowaniem znaków białych (odstępów pomiędzy blokami) – w zależności od zastosowanej metody poradzenia sobie z tym problemem, wystąpią odmienne “skutki uboczne”.

Metody rozwiązania problemu znaków białych

  • Usunięcie znaków białych w kodzie HTML (tracimy “wcięcia” = gorsza czytelność kodu);
  • Ustawienie negatywnych marginesów -4px;
  • Ustawienie font-size:0 kontenera oraz dodatniego font-size blokom wewnątrz (rodzi problemy z ustawianiem wielkości czcionek z użyciem em oraz %);
  • Zmniejszenie szerokości bloków, tak aby uwzględnić istniejące odstępy;
  • Pominięcie zamykających tagów (wygląda ohydnie w kodzie);
  • Zastosowanie komentarzy w HTML <!– –> tak, aby “symulowały” one znaki końca linii.

Zestawienie metod można jeszcze samodzielnie poszerzyć googlując np. frazę: display inline block remove space between divs.

W mojej osobistej opinii, najlepszą metodą rozwiązania problemu znaków białych jest zwyczajne usunięcie ich z kodu HTML (spomiędzy divów ustawionych w linii).

Poprzedni wpis

Następny wpis