٪۴۰ تخفیف تابستانه شروع شد! بزرگترین حراج سال ما

به ما بپیوندید

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

صفحه نمایش: مقدار بلوک درون خطی در مقایسه با display: inline، تفاوت عمده این است که display: inline-blockاجازه می دهد عرض و ارتفاع را روی عنصر تنظیم کنید. همچنین ، با display: inline-block، حاشیه / بالشتک های بالا و پایین احترام می گذارند…

محمد یوسفی

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

منبع

مطالب مرتبط

0 0 رای ها
امتیازدهی به مقاله
اشتراک در
اطلاع از
guest
0 نظرات
بازخورد (Feedback) های اینلاین
مشاهده همه دیدگاه ها