Czym w praktyce różni się display:block od display:inline-block

W kategorii CSS dnia 2020-07-12

display:block

Wartość display:block tworzy element blokowy, którego najważniejszą cechą jest to, że przyjmuje 100% szerokości kontenera. Dodatkowo każdy kolejny element będzie rozpoczynać się w nowym wierszy, niezależnie od szerokości elementu. Blokom można nadawać wysokość i szerokość.

display:inline-block

W przypadku wartości display:inline-block, również tworzony jest element blokowy, jednak jego szerokość uzależniona jest od zawartości elementu blokowego. Kolejne elementy układają się w jednej linii do momentu aż "braknie" szerokości ekranu - wtedy przechodzą do kolejnej linii.

Gołym okiem różnice można zobaczyć poniżej:

kiedy warto stosować display:block:

  • gdy chcemy, aby element dostosował się do szerokości kontenera, bez ustawiania wartości dla elementu blokowego,
  • w przypadku potrzeby nadania konkretnej szerokości lub wysokości elementu.

kiedy warto stosować display:inline-block:

  • w przypadku elementów menu znajdujących się obok siebie (standardowe menu główne w desktopie),
  • w elementach, gdzie chcemy zastosować kolor tła dla tekstu - szerokość elementu dostosuje się do paragrafu.