در مقایسه با display: inline تفاوت اصلی این است که display: inline-block امکان می دهد تا یک عرض(width) و ارتفاع(height) را روی عنصر تنظیم کنیم.

همچنین، با display: inline-block مقادیر margin ها و padding ها، برای top و bottom محترم هستند اما با display: inline آنها به حساب نمی آیند.

در مقایسه با display: block تفاوت اصلی این است که display: inline-block یک شکست خطی(line-break) را پس از عنصر قرار نمی دهد؛ از این رو، عنصر مذکور می تواند پس از دیگر عناصر قرار گیرد.

مثال زیر نشان می دهد که تفاوت رفتار دستورات display: inline و display: inline-block و display: block چیست:

span.a {
  display: inline; /* the default for span */
  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-block برای ایجاد لینک های هدایتی

یکی از استفاده هایی که از display: inline-block می شود، این است که آیتم های لیست(list) را به جای عمودی، به صورت افقی نمایش دهد. در مثال زیر، یک منوی هدایتی با لینک های افقی ایجاد شده است:

.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;
}

• بعدی
• قبلی