Ce este inline-block în CSS?

inline-block — este o valoare a proprietății display în CSS care permite elementelor să se comporte ca elemente inline (ocupând doar lățimea necesară și neîncepând pe o linie nouă), dar în același timp să aibă posibilitatea de a seta lățimea, înălțimea, marginile (margin, padding) din orice parte, ca elementele de tip bloc.

Caracteristici principale:

• Poziționare în linie: Elementele cu display: inline-block sunt plasate unul după altul pe aceeași linie, dacă există spațiu.
• Luarea în considerare a dimensiunilor: Se pot seta width și height. Dimensiunea implicită este determinată de conținut dacă nu este specificată.
• Margini și borduri complete: Se aplică margin, padding și border din toate părțile (sus, dreapta, jos, stânga), spre deosebire de elementele inline (inline), unde marginile și bordurile verticale nu afectează poziționarea elementelor vecine.
• Aliniere verticală: Se poate folosi proprietatea vertical-align pentru a alinia față de elementele vecine pe linie.

Exemplu de utilizare:

/* Elementele vor fi plasate în linie, cu dimensiuni și margini definite */
.inline-block-element {
  display: inline-block;
  width: 100px;
  height: 50px;
  margin: 10px;
  border: 1px solid black;
}

Domeniu de aplicare:

• Crearea de meniuri de navigație orizontale.
• Aranjarea blocurilor de conținut sub formă de carduri pe aceeași linie.
• Combinarea și alinierea elementelor care trebuie să fie alăturate, dar să aibă dimensiuni definite.

Comparativ cu alte valori de display:

display	Descriere	Luarea în considerare a dimensiunilor (width/height)	Luarea în considerare a marginilor verticale (margin-top/bottom)	Poziționare în linie
block	Începe întotdeauna pe o linie nouă, ocupând întreaga lățime disponibilă.	Da	Da	Nu
inline	Se plasează în linie cu textul, ocupând doar lățimea necesară.	Nu	Nu (margin-left/right influențează)	Da
inline-block	Se plasează în linie, dar se comportă ca un bloc în privința dimensiunilor și marginilor.	Da	Da	Da