CSSте inline-block эмне?

inline-block — бул CSSтеги display мүнөздөмөсүнүн мааниси, ал элементтерге сызыктык элементтер сыяктуу жүрүм-турумду берет (тек зарыл болгон тууралыкты алат жана жаңы сапка баштабайт), бирок ошол эле учурда тууралык, бийиктик, аралыктарды (margin, padding) бардык тараптардан коюуга мүмкүнчүлүк берет, блоктук элементтер сыяктуу.

Негизги өзгөчөлүктөрү:

• "Сапта" жайгашуу: display: inline-block менен элементтер биринин артынан бири жайгашат, эгер орун болсо.
• Өлчөмдөрдү эске алуу: width жана height коюуга болот. Мазмун боюнча алдын ала белгиленген өлчөм, эгер аны коюу керек болсо.
• Толук аралыктар жана рамкалар: margin, padding жана border бардык тараптардан колдонулат (top, right, bottom, left), ал эми inline элементтерде вертикалдык аралыктар жана рамкалар көргөзбөйт, алардын жайгашуусуна таасир этпейт.
• Вертикалдык тууралоо: vertical-align мүнөздөмөсүн колдонуп, көршү элементтерге салыштырмалуу тууралай аласыз.

Кыскача колдонуу:

/* Элементтер сапта жайгашат, белгиленген өлчөмдөр жана аралыктар менен */
.inline-block-element {
  display: inline-block;
  width: 100px;
  height: 50px;
  margin: 10px;
  border: 1px solid black;
}

Колдонуу чөйрөсү:

• Горизонталдуу навигациялык меню түзүү үчүн.
• Бир сапта карталар түрүндө контент блокторун жайгаштыруу.
• Бирге жайгаштырып, белгилүү өлчөмдөр менен тууралоо керек болгон элементтерди бириктирүү.

Башка display маанилери менен салыштыруу:

display	Түшүндүрмө	Өлчөмдөрдү эске алуу (width/height)	Вертикалдык аралыктарды эске алуу (margin-top/bottom)	Сапта жайгашуу
block	Ар дайым жаңы саптан баштайт, бардык жеткиликтүү тууралыкты ээлейт.	Ооба	Ооба	Жок
inline	Текст менен бир сапта жайгашат, гана зарыл болгон тууралыкты алат.	Жок	Жок (margin-left/right таасир этет)	Ооба
inline-block	Сапта жайгашат, бирок өлчөмдөр жана аралыктар боюнча блок катары иштейт.	Ооба	Ооба	Ооба