Wat is inline-block in CSS?

inline-block — is 'n waarde van die display-eienskap in CSS wat toelaat dat elemente as inline-elemente optree (net die nodige breedte inneem en nie op 'n nuwe lyn begin nie), maar terselfdertyd die moontlikheid het om breedte, hoogte, marge (margin, padding) van enige kant af te stel, soos blokelemente.

Hoofkenmerke:

• Posisionering in lyn: Elemente met display: inline-block word een na die ander op een lyn geplaas, as daar genoeg ruimte is.
• Hantering van groottes: width en height kan gestel word. Die standaard grootte word deur die inhoud bepaal as dit nie gespesifiseer is nie.
• Volledige marge en rand: margin, padding en border word van alle kante af toegepas (bo, regs, onder, links), anders as inline-elemente (inline), waar vertikale marge en rande nie die posisie van nabye elemente beïnvloed nie.
• Vertikale uitlyning: Die eienskap vertical-align kan gebruik word om uit te lyn teenoor nabye elemente op die lyn.

Voorbeeld van gebruik:

/* Elemente word op een lyn geplaas, met vasgestelde groottes en marge */
.inline-block-element {
  display: inline-block;
  width: 100px;
  height: 50px;
  margin: 10px;
  border: 1px solid black;
}

Toepassingsveld:

• Skep van horisontale navigasiebalkke.
• Plaas van blokke van inhoud in die vorm van kaarte op een lyn.
• Kombinasie en uitlyning van elemente wat langs mekaar moet wees, maar met vasgestelde groottes.

Vergelyking met ander display-waardes:

display	Beskrywing	Hantering van groottes (width/height)	Hantering van vertikale marge (margin-top/bottom)	Posisionering in lyn
block	Begin altyd op 'n nuwe lyn, neem die volle beskikbare breedte in.	Ja	Ja	Nee
inline	Word op lyn met teks geplaas, neem net die nodige breedte in.	Nee	Nee (margin-left/right beïnvloed)	Ja
inline-block	Word op lyn geplaas, maar gedra soos 'n blok in groottes en marge.	Ja	Ja	Ja