Inline-Block

CSS Joylashuvi - display: inline-block

display: inline-block Qiymati

display: inline bilan solishtirganda, asosiy farq shundaki, display: inline-block elementga kenglik va balandlik belgilash imkonini beradi.

Shuningdek, display: inline-block bilan yuqori va pastki chegara/to'ldirish hurmat qilinadi, lekin display: inline bilan bu holat bo'lmaydi.

display: block bilan solishtirganda, asosiy farq shundaki, display: inline-block elementdan keyin qator kesilishi qo'shilmaydi, shuning uchun element boshqa elementlar yonida joylashishi mumkin.

Quyidagi misol display: inline, display: inline-block va display: block xususiyatlarining turli xulq-atvorini ko'rsatadi:

Misol

span.a {
  display: inline; /* span uchun standart */
  width: 100px;
  height: 100px;
  padding: 5px;
  border: 1px solid blue;
  background-color: yellow;
}
 
span.b {
  display: inline-block;
  width: 100px;
  height: 100px;
  padding: 5px;
  border: 1px solid blue;
  background-color: yellow;
}
 
span.c {
  display: block;
  width: 100px;
  height: 100px;
  padding: 5px;
  border: 1px solid blue;
  background-color: yellow;
}

Inline-blockdan Foydalanish - Navigatsiya Havolalari Yaratish

display: inline-blockning keng tarqalgan foydalanish usullaridan biri ro'yxat elementlarini vertikal o'rniga gorizontal ko'rsatishdir. Quyidagi misol gorizontal navigatsiya havolalarini yaratadi:

Misol

.nav {
  background-color: yellow;
  list-style-type: none;
  text-align: center;
  padding: 0;
  margin: 0;
}
 
.nav li {
  display: inline-block;
  font-size: 20px;
  padding: 20px;
}