طرح‌بندی CSS - display: inline-block

display: inline-block

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

همچنین،اگر display: inline-block تنظیم شود،مargins vertical/horizontal و paddings حفظ می‌شوند،در حالی که display: inline این کار را نمی‌کند.

در مقایسه با display: block،تفاوت اصلی در این است که display: inline-block در عقب عنصر یک خط جدید اضافه نمی‌کند، بنابراین این عنصر می‌تواند در کنار دیگر عناصر قرار گیرد.

نمونه‌ای از نمایش display: inline،display: inline-block و display: block به عنوان رفتارهای مختلف است:

مثال

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

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

مثال

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

آموزش خودتان را امتحان کنید