HTML / CSS / JavaScript
July 14, 2019

inline-block

display: inline-block bilan display: inline ni taqqoslaganimizda, inline-block katta farq qilishi ya'ni u elementning width va height xossalarini kiritishga imkon berishini bilib olamiz.
Bundan tashqari inline-block : top-bottom, margin-padding xususiyatlarni ham qo'llaydi, inline esa yo'q.
display: inline-block bilan display: block ni taqqoslaganimizda, inline-block katta farq qilishi ya'ni elementdan keyin line-break(qator) tashlamasdan, bitta chiziqda yonma-yon elementlar joylashuvini ta'minlaydi.

Quyidagi misolda uchala xossalarning birga qo'llanilib ularning harakatlari farqi keltirilgan:


inline-blockni nav menu yaratishda ishlatish

display:inline-block bilan ro'yhat bandlarini vertikal o'rniga gorizontal tartibda ekranga chiqarishimiz mumkin. Quyidagi namunada gorizontal navigatsion menyu yaratish ko'rsatilgan: