آموزش طرح بندی CSS – نمایش درون بلوکی

12 جولای 2021

صفحه نمایش: مقدار بلوک درون خطی

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

همچنین ، با display: inline-block، حاشیه / بالشتک های بالا و پایین احترام می گذارند ، اما با display: 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;
}

استفاده از بلوک درون خطی برای ایجاد پیوندهای پیمایش

یکی از کاربردهای معمول display: inline-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;
}

منبع

مقاله‌های مشابه

7 مرحله فروش بیمه عمر (2)

7 مرحله فروش بیمه عمر (2)

18/9/96 چه بلایی سر آدم میاره خیلی جالبه انقدر سنگ، توام داری درست راه میری اینجوری لنگ میزنی، وقتی یه ذره زمانش طولانی تر بشه دیگه لنگ نمیزنی مجبوری اینجوری کنی من دیگه نمیتونم بیام یه ذره میشینی پامیشی، فروش اینو خیلیها حذف میکنن، برای خیلیها تو ذهنشون همون سنگه...

بیشتر بخوانید
7 مرحله فروش بیمه عمر (1)

7 مرحله فروش بیمه عمر (1)

11/9/96 امروز میخوایم 7 مرحله فروش بیمه عمر یا هر محصولی که شما در کل کره زمین میشناسید، وقتی میگم محصول یه روز این محصولی که داریم ازش صحبت میکنیم میتونه هر چیزی به چیزی بجز بیمه عمر باشه، یکی از مهمترین مباحثی که در دوره تکنسین یاد میگیرید و عملاً آچارفرانسه تمام...

بیشتر بخوانید

شما هم به جمع ۱۰۰,۰۰۰ مشترک خبرنامه‌ ما بپیونید

0 دیدگاه

یک دیدگاه بنویسید

نشانی ایمیل شما منتشر نخواهد شد.