Kas ir inline-block CSS?

inline-block ir vērtība CSS īpašībai display, kas ļauj elementiem uzvesties kā līnijas elementiem (ņem tikai nepieciešamo platumu un nesāk jaunu rindu), bet tajā pašā laikā ļauj noteikt platumu, augstumu, atstarpes (margin, padding) no jebkuras puses, kā bloka elementi.

Galvenās īpašības:

• Vietas izvietojums "rindā": Elementi ar display: inline-block izvietojas viens aiz otra tajā pašā rindā, ja vieta ir.
• Izmēru ņemšana vērā: var noteikt width un height. Satura pēc noklusējuma nosaka izmēru, ja tie nav noteikti.
• Pilni atstarpes un rāmji: tiek piemēroti margin, padding un border no visām pusēm (top, right, bottom, left), atšķirībā no līnijas elementiem (inline), kur vertikālie atstarpes un rāmji neietekmē blakus esošo elementu izvietojumu.
• Vertikāla izlīdzināšana: var izmantot īpašību vertical-align, lai izlīdzinātu elementus rindā.

Piemērs lietošanai:

/* Elementi tiks izvietoti rindā, tiem ir noteikti izmēri un atstarpes */
.inline-block-element {
  display: inline-block;
  width: 100px;
  height: 50px;
  margin: 10px;
  border: 1px solid black;
}

Lietošanas joma:

• Horizontālas navigācijas izvēlnes izveide.
• Bloku satura izvietošana kā kartītes vienā rindā.
• Elementu kombinēšana un izlīdzināšana, kas jānovieto blakus, bet ar noteiktiem izmēriem.

Salīdzinājums ar citām display vērtībām:

display	Apraksts	Izmēru ņemšana vērā (width/height)	Vertikālo atstarpju ņemšana vērā (margin-top/bottom)	Rindas izvietojums
block	Vienmēr sāk jaunu rindu, aizņem visu pieejamo platumu.	Jā	Jā	Nē
inline	Izvietojas teksta rindā, aizņem tikai nepieciešamo platumu.	Nē	Nē (ietekmē margin-left/right)	Jā
inline-block	Izvietojas rindā, bet uzvedas kā bloks pēc izmēriem un atstarpēm.	Jā	Jā	Jā