Layout - display: inline-block

از موتو کد، دانشنامهٔ برنامه‌نویسی

مقدار display: inline-block[ویرایش | ویرایش]

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

همچنین، با display: inline-block،‌ حاشیه‌ها/ paddingهای بالا و پایین در نظر گرفته می‌شوند، اما با 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 (بلوک درون خطی) برای ساخت لینک های navigation[ویرایش | ویرایش]

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

مثال
.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;
}

منابع آموزشی[ویرایش]