Co 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 novom riadku), ale zároveň majú možnosť nastaviť šírku, výšku, okraje (margin, padding) z ľubovoľnej strany, ako blokové prvky.

Hlavné vlastnosti:

• Umiestnenie v riadku: Prvky s display: inline-block sa umiestňujú za sebou na jednom riadku, ak je dostatok miesta.
• Zohľadnenie rozmerov: Môžu sa nastaviť width a height. Predvolená veľkosť je určená obsahom, ak nie je špecifikovaná.
• Kompletné okraje a rámy: margin, padding a border sa aplikujú zo všetkých strán (hore, vpravo, dole, vľavo), na rozdiel od inline 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 na riadku.

Príklad použitia:

/* Prvky budú umiestnené v riadku, s definovanými rozmermi a okrajmi */
.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.
• Umiestnenie 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ľadňuje rozmery (width/height)	Zohľadňuje vertikálne okraje (margin-top/bottom)	Umiestnenie 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 (margin-left/right ovplyvňuje)	Áno
inline-block	Umiestňuje sa v riadku, ale správa sa ako blok v rozmeroch a okrajoch.	Áno	Áno	Áno