Czym jest inline-block w CSS?

inline-block — jest wartością właściwości display w CSS, która pozwala elementom zachowywać się jak elementy w linii (zajmując tylko potrzebną szerokość i nie zaczynając od nowej linii), ale jednocześnie mieć możliwość ustawiania szerokości, wysokości, marginesów (margin, padding) z dowolnej strony, jak elementy blokowe.

Główne cechy:

• Pozycjonowanie w linii: Elementy z display: inline-block są ustawiane jeden po drugim w jednej linii, jeśli jest na to miejsce.
• Uwzględnianie rozmiarów: Można ustawiać width i height. Domyślnie rozmiar jest określany przez zawartość, jeśli nie jest ustawiony.
• Pełne marginesy i obramowania: margin, padding i border są stosowane ze wszystkich stron (góra, prawa, dół, lewa), w przeciwieństwie do elementów inline (inline), gdzie marginesy i obramowania pionowe nie wpływają na ułożenie sąsiednich elementów.
• Wyrównanie pionowe: Można użyć właściwości vertical-align, aby wyrównać względem sąsiednich elementów w linii.

Przykład użycia:

/* Elementy będą ustawione w linii, z określonymi rozmiarami i marginesami */
.inline-block-element {
  display: inline-block;
  width: 100px;
  height: 50px;
  margin: 10px;
  border: 1px solid black;
}

Zastosowania:

• Tworzenie poziomych menu nawigacyjnych.
• Układanie bloków treści w formie kart w jednej linii.
• Łączenie i wyrównywanie elementów, które mają być obok siebie, ale z określonymi rozmiarami.

Porównanie z innymi wartościami display:

display	Opis	Uwzględnia rozmiary (width/height)	Uwzględnia marginesy pionowe (margin-top/bottom)	Układ w linii
block	Zawsze zaczyna od nowej linii, zajmuje całą dostępną szerokość.	Tak	Tak	Nie
inline	Układa się w linii z tekstem, zajmuje tylko potrzebną szerokość.	Nie	Nie (margin-left/right wpływają)	Tak
inline-block	Układa się w linii, ale zachowuje się jak blok pod względem rozmiarów i marginesów.	Tak	Tak	Tak