CSS-те inline-block деген эмне?

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

Негізгі сипаттамалары:

• "Жолда" орналастыру: display: inline-block бар элементтер бір жолда бірінен соң бірі орналасады, егер орын жеткілікті болса.
• Өлшемдерді ескеру: width және height орнатуға болады. Мазмұн әдепкі бойынша өлшемді анықтайды, егер олар көрсетілмеген болса.
• Толық шекаралар мен маргиналар: margin, padding және border барлық жағынан (жоғары, оң, төмен, сол) қолданылады, ал жолды элементтер (inline) үшін вертикальды маргиналар мен шекаралар көрінбейді және көршілес элементтердің орналасуына әсер етпейді.
• Вертикальды теңестіру: vertical-align қасиетін пайдаланып, қатардағы басқа элементтерге қатысты тік бағытта теңестіруге болады.

Қолдану мысалы:

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

Қолдану салалары:

• Горизонтальды навигациялық мәзірлер құру.
• Контент блоктарын бір жолда карточкалар түрінде орналастыру.
• Бірге тұруы керек, бірақ белгілі бір өлшемдері болуы керек элементтерді біріктіру және теңестіру.

Басқа display мәндерімен салыстыру:

display	Сипаттамасы	Ені/биіктікті ескеру	Вертикальды маргиналар мен шекараларды ескеру	Жолда орналасу
block	Әрқашан жаңа жолдан басталады, барлық қол жетімді енді алады.	Иә	Иә	Жоқ
inline	Мәтін сияқты жолда орналасады, тек қажетті енді алады.	Жоқ	Жоқ (margin-left/right әсер етеді)	Иә
inline-block	Жолда орналасады, бірақ өлшемдері мен маргиналары бойынша блочты сияқты әрекет етеді.	Иә	Иә	Иә