Mis on inline-block CSS-is

inline-block — see CSS omaduse display väärtus, mis võimaldab elementidel käituda nagu ridaelemendid (võtab ainult vajaliku laiuse ja ei alusta uut rida), kuid samal ajal võimaldab määrata laius, kõrgus, vahed (margin, padding) kõigil külgedel, nagu blokk-elementidel.

Peamised omadused:

• Asukoht "rida": Elementid display: inline-block asetuvad üksteise järel samal real, kui ruumi on.
• Suuruste arvestamine: saab määrata width ja height. Sisu määrab vaikimisi suuruse, kui need pole määratud.
• Täielikud vahed ja raamid: rakendatakse margin, padding ja border kõigil külgedel (top, right, bottom, left), erinevalt ridaelemendist (inline), kus vertikaalsed vahed ja raamid ei mõjuta naaberelementide paigutust.
• Vertikaalne joondamine: saab kasutada omadust vertical-align, et joondada elemente real.

Näide kasutusest:

/* Elementid paiknevad real, neil on määratud suurused ja vahed */
.inline-block-element {
  display: inline-block;
  width: 100px;
  height: 50px;
  margin: 10px;
  border: 1px solid black;
}

Kasutusala:

• Horisontaalse navigeerimismenüü loomine.
• Blokikonteksti paigutamine ühe realt, nagu kaardid.
• Elementide kombineerimine ja joondamine, mis peavad olema kõrval, kuid teatud suurustega.

Võrdlus teiste display väärtustega:

display	Kirjeldus	Suuruste arvestamine (width/height)	Vertikaalsete vahede arvestamine (margin-top/bottom)	Real paiknemine
block	Alati alustab uut rida, võtab kogu saadaval laiuse.	Jah	Jah	Ei
inline	Paigutub teksti real, võtab ainult vajaliku laiuse.	Ei	Ei (mõjutab margin-left/right)	Jah
inline-block	Paigutub real, kuid käitub nagu blokk suuruste ja vahede osas.	Jah	Jah	Jah