inline-block در css ، مقدار دیگری است که علاوه بر block و inline می توانیم به ویژگی display بدهیم.

تفاوتش با display: inline در این است که display: inline-block به ما این امکان را می دهد که به المان، width و height بدهیم و margin و padding بالا و پایین نیز قابل تعیین است که در حالت inline این امکان را نداریم.

همچنین تفاوتش با display: block در این است که display: inline-block به ما این امکان را می دهد که المان در یک خط، در کنار سایر المان ها قرار بگیرد و الزاما تمام یک خط را اشغال نمی کند.

در مثال زیر تفاوت بین سه مفهوم 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 هستند، طول و عرض و padding نگرفته اند. اما المان های پاراگراف دوم که inline-block هستند، نه تنها در همان سطر قرار گرفته اند، بلکه طول و عرض و padding نیز گرفته اند.
و المان های پاراگراف سوم که block هستند، طول و عرض گرفته اند، اما هر کدام در یک سطر جداگانه قرار گرفته اند.

The display Property

display: inline

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat scelerisque elit sit amet consequat. Aliquam erat volutpat. Aliquam venenatis gravida nisl sit amet facilisis. Nullam cursus fermentum velit sed laoreet.

display: inline-block

display: block

استفاده از inline-block در css برای ایجاد Navigation Link

یکی از کاربردهای معمول inline-block در css این است که با استفاده از آن می توان لیست های افقی ایجاد کرد.
مثال زیر این کاربرد را نمایش می دهد:

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