Čo je inline-block v CSS?

inline-block je hodnota vlastnosti display v CSS, ktorá umožňuje prvkom správať sa ako riadkové prvky (zaberajú len potrebnú šírku a nezačínajú na nový riadok), ale zároveň môžu nastavovať šírku, výšku, okraje (margin, padding) zo všetkých strán, ako blokové prvky.

Hlavné charakteristiky:

• Umiestnenie "v riadku": Prvky s display: inline-block sa umiestňujú za sebou v jednom riadku, ak je miesto.
• Zohľadnenie rozmerov: Môže sa nastaviť width a height. Obsah určuje predvolenú veľkosť, ak nie sú zadané.
• Plné okraje a rámy: Používajú sa margin, padding a border zo všetkých strán (top, right, bottom, left), na rozdiel od riadkových prvkov (inline), kde vertikálne okraje a rámy neovplyvňujú rozloženie susedných prvkov.
• Vertikálne zarovnanie: Môže sa použiť vlastnosť vertical-align na zarovnanie voči susedným prvkom v riadku.

Príklad použitia:

/* Prvky budú usporiadané v riadku, majú nastavené rozmery a okraje */
.inline-block-element {
  display: inline-block;
  width: 100px;
  height: 50px;
  margin: 10px;
  border: 1px solid black;
}

Oblasť použitia:

• Vytváranie horizontálnych navigačných menu.
• Usporiadanie blokov obsahu vo forme kariet v jednom riadku.
• Kombinovanie a zarovnávanie prvkov, ktoré majú byť vedľa seba, ale s určenými rozmermi.

Porovnanie s inými hodnotami display:

display	Popis	Zohľadnenie rozmerov (width/height)	Zohľadnenie vertikálnych okrajov (margin-top/bottom)	Usporiadanie v riadku
block	Vždy začína na novom riadku, zaberá celú dostupnú šírku.	Áno	Áno	Nie
inline	Umiestňuje sa v riadku s textom, zaberá len potrebnú šírku.	Nie	Nie (ovplyvňujú margin-left/right)	Áno
inline-block	Umiestňuje sa v riadku, ale správa sa ako blok podľa rozmerov a okrajov.	Áno	Áno	Áno