Struktura witryny: Metoda display: inline-block

Atrybut CSS 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:

Bloki w linii

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ą tak wielkiego problemu jak "spacje" poziome.

Zalety podejścia display:inline-block

  • Nie występuje potrzeba czyszczenia float:left 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 float.

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).
  • stosowanie 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), albo takie zaplanowanie layoutu, aby tego typu odstępy mogły wystąpić.

Aby zobaczyć układanie bloków metodą display:inline-block w tutorialu video, wystarczy przepracować następujący fragment w tym filmie.

Flexbox

To nowy, alternatywny sposób tworzenia struktury witryny, który być może stanie się w przyszłości pełnoprawnym standardem W3C. Aktualnie problemem (jak w przypadku wielu nowych rozwiązań) jest słaba kompatybilność wsteczna takiej struktury. Jednak stosowanie kontenerów zawierających zapisy display:flex oraz display:inline-flex wydaje się być na tyle ciekawym rozwiązaniem problemu tworzenia siatki bloków, iż warto już teraz przyjrzeć mu się bliżej. Zachęcam do wykonania samodzielnego researchu w sieci, zaś na sam początek warto zajrzeć tutaj.

Zobacz także

Daj się zaskoczyć! Poniżej wylosowałem dla Ciebie pięć wpisów z innych kategorii blogowych aniżeli ta, którą właśnie przeglądasz:

Polecamy: Sekurak Academy 2024

Sekurak Academy 2024

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp do materiałów z edycji Sekurak Academy z roku 2023! Przy zakupie możecie skorzystać z kodu: pasja-akademia w koszyku, uzyskując rabat -30% na bilety w wersji "Standard" - warto korzystać! Więcej szczegółów znajdziecie tutaj.

Książka: Wprowadzenie do bezpieczeństwa IT

Wprowadzenie do bezpieczeństwa IT

Niedawno wystartował dodruk świetnej, rozchwytywanej książki pt. "Wprowadzenie do bezpieczeństwa IT, Tom I" (około 940 stron). Mamy dla Was kod: pasja (wpisz go w koszyku), dzięki któremu otrzymacie 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla naszych Widzów! Jest to pierwszy tom serii o ITsec, który wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

Pomóż dzieciom

Polska Akcja Humanitarna od wielu lat dożywia dzieci. Proszę, poświęć teraz dosłownie chwilę i pomóż klikając w oznaczony strzałką zielony brzuszek Pajacyka. Dziękuję!

Komentarze

Disqus

Kategorie wpisów

Oto polecana książka warta Waszej uwagi.
Pełna lista polecanych książek jest tutaj.

Uwaga - w dniach od 06.02.2024 do 15.02.2024 trwa w Helion.pl walentynkowa akcja promocyjna "Pokochaj kodowanie!" - otrzymujemy drugą książkę gratis albo -35% na jedną książkę drukowaną oraz -40% na ebooka. Zobacz promocję walentynkową tutaj.

Bądź na bieżąco
Pasja informatyki